addEventListener函数未正确判断邮箱匹配情况的问题求助

错误点分析 #

• 输入值获取错误：页面加载时就获取input.innerHTML，但输入框的内容存在value属性里，而且必须在点击按钮时实时获取，不然拿到的永远是页面加载时的初始空值。
• 数组与字符串直接比较：permittedEmail是数组类型，不能直接和字符串email用!=或=比较，得用数组的includes()方法判断输入邮箱是否在允许列表中。
• 赋值运算符误用：else if (email = permittedEmail)里的=是赋值操作，不是比较，逻辑完全错误。
• 表单默认提交行为：用div做提交按钮，点击后表单会默认刷新页面，导致控制台输出一闪而过，应该用button元素并阻止默认提交行为。

修正后的代码 #

HTML部分

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<div class="container py-5">
  <div class="row justify-content-center">
      <div class="col-6">
          <form>
              <h1 class="mb-5 fw-bold fs-1 text-center">Inserisci la tua mail</h1>
              <div class="mb-3">
                  <label for="InputEmail1" class="form-label">Indirizzo Email</label>
                  <input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp">
              </div>
              <div class="d-flex justify-content-center">
                  <button id="submit-button" type="submit" class="btn btn-primary">Submit</button>
              </div>
          </form>
      </div>
  </div>
</div>

JavaScript部分

const input = document.getElementById("InputEmail");
const permittedEmail = ["fake.email@gmail.com"];
const buttonClick = document.getElementById("submit-button");

buttonClick.addEventListener('click', function (e) {
  // 阻止表单默认提交刷新页面
  e.preventDefault();
  // 点击时实时获取输入框内容，trim()去除前后空格避免误判
  const email = input.value.trim();
  
  if (permittedEmail.includes(email)) {
    console.log("That's good");
  } else {
    console.log("You can't use that email to register");
  }
});

关键修正说明 #

1. 实时获取输入值：把输入值的获取逻辑移到点击事件内部，改用input.value获取用户实际输入内容，添加trim()避免空格导致的匹配失败。
2. 数组包含判断：用permittedEmail.includes(email)替代直接比较，准确判断输入邮箱是否在允许列表中。
3. 修正按钮类型：将div替换为button元素，确保表单默认行为可被拦截。
4. 阻止默认行为：添加e.preventDefault()，避免表单提交后刷新页面，保证控制台输出能正常显示。

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