javascript - 为什么“document.getElementById().value”在这段代码中总是等于“”？

Question

好的，所以在我提出问题或发布任何代码之前，我将解释我正在尝试做什么。

我正在使用 Windows 10 和 XAMPP。我正在尝试创建一个主要由 HTML 和 PHP 组成的注册表单，但是我认为让浏览器检查用户选择的密码是否匹配更有意义，甚至在将其提交到服务器之前确认是否匹配。在后端对 PHP 做同样的事情。

为此，我决定使用简单的 JS 代码。

我正在尝试将密码字段和确认字段中写入的文本绑定到两个变量，然后使用 if 检查它们是否匹配，但是即使我故意输入错误的确认，表单也会提交。

我尝试使用谷歌浏览器控制台找出原因。事实证明，我用于密码和确认的变量始终等于“”，并且由于“”=“”表单始终提交。

当我在控制台中输入“btn”时，它会显示正确的 HTML 元素，这意味着 DOM 是在 JS 之前加载的，所以这不是问题，我也在 HTML 表单之后编写了我的 js 代码。

我还注意到，当我在控制台中输入“password.value”时，它总是正确显示我在该字段中写入的内容。

是因为我将所有这些都写在一个 php 文件中吗？如果是这样，我该如何混合 JS 和 PHP 来防止这个问题。我将在这里发布表单和js代码。

编辑：我知道我的问题有点含糊，所以我需要这个编辑，我知道我没有停止脚本，所以表单无论如何都会提交但我必须得到警报，因为我故意让密码和确认不匹配！

var btn = document.getElementById('3');
btn.addEventListener('click' , function(){
  var pa = document.getElementById('password').value; 
  var co = document.getElementById('confirm').value;
  if(pa !== co)
  {
    alert("password and confirmation must match!");
  }
 });

<form method="post">
  <label for="email">Please enter your valid email address:</label> 
  <input type="email" name="email" placeholder="enter your email address" required> 
  <br> 
  <br> 
  <label for="password">Please choose a password:</label> 
  <input type="password" name ="password" placeholder="enter your password" required id="pass"> 
  <br> 
  <br> 
  <label for="confirm">Please confirm your password:</label> 
  <input type="password" name="confirm" placeholder="confirm your password" required id="conf"> 
  <br> 
  <label for="agreement">by registering on this website i agree to the <a href="#">terms and conditions!</a></label>
  <input type="checkbox" name="agreement" id=""> 
  <br> 
  <input type="submit" value="Sign Up!" id="3"> 
</form>

标签： javascript