如何将HTML表单用户输入存储到JavaScript变量？及存储失败排查

核心问题 #

• 提交按钮未触发数据获取逻辑：表单里的「Login」按钮是type="submit"，但你只给「Close」按钮绑定了closeForm()函数。点击Login时不会执行获取输入值的代码，自然无法把输入内容存入变量。
• 未定义变量导致代码中断：closeForm()里的console.log(input)中，input变量从未声明，会触发JS报错，直接中断后续代码执行——连后面的alert都不会弹出。

修复步骤 #

1. 让提交按钮触发数据获取

给Login按钮添加onclick="closeForm()"，或者修改form的onsubmit属性来调用函数：

<!-- 方式1：给submit按钮绑定函数 -->
<button type="submit" class="btn" onclick="closeForm()">Login</button>

<!-- 方式2：修改form的onsubmit -->
<form class="form-container" onsubmit="closeForm(); return false;">

2. 修正未定义的console.log语句

把console.log(input)改成打印已定义的username和password，或者直接删除这句：

// 修正后
console.log('用户名:', username, '密码:', password);

完整修复代码 #

JavaScript

function openForm() {
  document.getElementById("myForm").style.display = "block";
  document.getElementById("profile").style.display = "none";
  document.getElementById("usernametxt").style.display = "none";
}

function closeForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  console.log('用户名:', username, '密码:', password);
  document.getElementById("myForm").style.display = "none";
  document.getElementById("Login").style.display = "none";
  document.getElementById("profile").style.display = "block";
  document.getElementById("usernametxt").style.display = "block";

  alert(username);
  alert(password);
}

HTML

<div>
  <button class="open-button" onclick="openForm()" id="Login">Log In</button>

  <!-- The form -->
  <div class="form-popup" id="myForm">
    <form class="form-container" onsubmit="return false;">
      <h1>Login</h1>

      <label for="username"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="username" id="username" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" id="password" required>

      <button type="submit" class="btn" onclick="closeForm()">Login</button>
      <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
    </form>
  </div>
</div>

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