script.js:3:20 未捕获的类型错误：无法读取 null 的属性（读取“addEventListener”）

Question

我想提交一个 HTML 表单并根据输入和文本区域中的值读取一条消息。但是，我收到此 TypeError 告诉我事件侦听器为空，即使它不是。谁能看出我哪里错了？

let recommendationForm = document.getElementById("recommendationForm");

recommendationForm.addEventListener("submit", (e) => {
    e.preventDefault();

    let name = document.getElementById("name");
    let recommendation = document.getElementById("recommendation");

    if (name.value == "" || recommendation.value == "") {
        alert("Input a value in both fields!");
    } else {
        alert("Recommendation submitted successfully!");
        console.log(`${name.value} submitted their recommendation`);
    };

    name.value = "";
    recommendation.value = "";
});

<form action="" id="recommendationForm" class="recommendationSubmission">
  <input type="text" id="name" name="name" placeholder="Name" autocapitalize="on"/>
  <textarea type="text" id="recommendation" placeholder="Recommendation" rows="5" cols="45" autocapitalize="on" wrap="hard"></textarea>
  <button type="submit" id="button">Submit</button>
</form>

Answer 1

当 JS 运行时，页面中还没有创建元素。您可以将 JS 块移到 HTML 块后面，或者在其中添加 JS：

document.addEventListener("DOMContentLoaded", function() {
  // code...
});