JavaScript无法从表单取值，生成URL时返回null值

你的代码存在几个关键问题，导致生成URL时出现null或错误：

核心问题点 #

• 代码执行时机错误：你在页面加载时就直接获取表单值并计算URL，这时候用户还没输入任何内容，所有值都是初始状态（比如输入框为空，复选框未勾选）。
• 复选框状态判断错误：复选框的选中状态要通过checked属性判断，不是value属性，默认value是"on"，不是你判断的"True"。
• 元素ID不匹配/缺失：
  • JS里引用了id="basic"的元素，但HTML里根本没有这个元素，直接访问其value会抛出错误。
  • HTML里a标签的ID是Link（大写），但JS里用的是link（小写），DOM元素ID区分大小写，导致找不到元素。
• HTML标签未闭合：<a>标签没有闭合，会导致DOM结构异常。

修正后的代码 #

HTML部分 #

<div>
  <!-- Start Inputs -->
  <form class="input">
    <input type="text" placeholder="site" id="site">
    <br>
    <input type="checkbox" id="test">
    <label for="test">TEST</label>
    <input type="checkbox" id="normal">
    <label for="normal">normal</label>
    <input type="checkbox" id="html">
    <label for="html">html</label>
    <!-- 补充缺失的basic复选框 -->
    <input type="checkbox" id="basic">
    <label for="basic">basic</label>
  </form>
  <button type="button" onclick='displayLink()'>Generate Link</button>
  <!-- Inputs End -->
</div>
<!-- Display URL Result -->
<div id="URL-container">
  <br>
  <a id="link" href="#" target="_blank"></a>
</div>

JavaScript部分 #

function displayLink() {
  // 把所有值的获取和URL计算放到函数内部，点击按钮时才执行
  const site = document.getElementById("site").value.trim();
  // 复选框用checked判断选中状态
  const prodtest1 = document.getElementById("test").checked ? "-test.com/" : "-prod.com/";
  const prodtest2 = document.getElementById("normal").checked ? "test/" : "prod/";
  const isBasic = document.getElementById("basic").checked ? "AuthMethod=normal" : "html/public/";
  const isHtml5 = document.getElementById("html").checked ? "login.aspx" : "default.aspx";

  // 生成完整URL，用模板字符串拼接更清晰
  const url = `https://${site}${prodtest1}${prodtest2}${isBasic}${isHtml5}`;
  
  // 更新链接的文本和可点击属性
  const linkElement = document.getElementById("link");
  linkElement.textContent = url;
  linkElement.href = url;
}

额外说明 #

1. 补充了缺失的id="basic"复选框，避免JS找不到元素报错。
2. 给输入框值加了trim()，过滤用户输入的多余空格。
3. 同时更新链接的文本内容和跳转地址，让生成的URL可以直接点击访问。

内容的提问来源于stack exchange，提问作者StevenB1