验证邮箱一致性时出现ReferenceError：email1未定义问题求助

错误原因 #

• 直接执行equals_function(email1, email2)时，email1和email2是未声明的变量，浏览器找不到对应值，触发ReferenceError。
• 代码未绑定表单提交事件，页面一加载就会执行判断函数，而非点击提交按钮时触发。
• HTML里label的for属性与input的id不匹配，导致标签和输入框无法正确关联。

修复后的代码 #

HTML部分

<form id="emailForm">
  <label for="emailone">邮箱地址:</label>
  <input type="text" name="emailone" id="emailone">

  <p>
    <label for="emailtwo">确认邮箱地址:</label>
    <input type="text" name="emailtwo" id="emailtwo">
  </p>
  <p><input type="submit"></p>
</form>

JavaScript部分

function equals_function(email1, email2) {
  if (email1 !== email2) {
    alert("你输入的邮箱地址不匹配！");
  }
}

// 获取表单并监听提交事件
const emailForm = document.getElementById('emailForm');
emailForm.addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新页面
  e.preventDefault();
  
  // 获取输入框的实际值
  const email1 = document.getElementById('emailone').value.trim();
  const email2 = document.getElementById('emailtwo').value.trim();
  
  // 执行邮箱匹配判断
  equals_function(email1, email2);
});

修复说明 #

• 通过document.getElementById获取输入框的真实值，确保变量有合法定义。
• 绑定表单的submit事件，让判断逻辑在点击提交按钮时才触发。
• 用e.preventDefault()阻止表单默认提交行为，避免页面刷新丢失输入内容。
• 修正label与input的关联问题，优化页面可访问性。

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