如何将用户输入与变量进行比较？代码功能实现求助

JavaScript 部分 #

function submitLogin(e) {
  // 阻止表单默认提交行为，避免页面刷新
  e.preventDefault();
  
  const validUser = "test";
  // 获取输入框元素，注意getElementById不需要加#，目标输入框id是username
  const userInput = document.getElementById("username");
  
  // 用===做严格比较，输入框内容存在value属性中
  if (userInput.value === validUser) {
    alert("登录成功！");
    closeForm();
  } else {
    alert("用户名错误，请重试！");
    userInput.value = ""; // 清空输入框
  }
}

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

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}

HTML 部分 #

<button class="open-button" onclick="openForm()">Open Form</button>

<div class="form-popup" id="myForm">
  <form action="#" class="form-container">
    <h1>Login</h1>

    <label for="username"><b>username</b></label>
    <input type="text" placeholder="username" id="username" name="username" required>
    <button type="submit" onclick="submitLogin(event)" class="btn">Login</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>

• document.getElementById('#user') 写法错误：getElementById的参数是纯id字符串，不需要加#，且你的输入框实际id是username而非user
• 比较逻辑用了赋值运算符=：判断相等必须用==（宽松比较）或===（严格比较，推荐使用），=是赋值操作，会导致判断逻辑完全失效
• 获取输入内容用错属性：输入框的用户输入内容存在.value属性里，不是.input
• 未处理表单默认提交行为：type="submit"的按钮点击后会触发表单提交，导致页面刷新，必须用e.preventDefault()阻止
• 函数命名冲突：原函数名submit和表单自带的submit方法重名，容易引发未知问题，建议改成submitLogin这类更明确的名称

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