代码之家 › 专栏 › 技术社区 › Alx_Wil95

script.js:3:20未捕获类型错误:无法读取null的属性(正在读取“addEventListener”)

addeventlistener typeerror null html javascript

1

Alx_Wil95 · 技术社区 · 2 年前

我想提交一个HTML表单,并根据输入和文本区域中的值读取消息。然而,我得到了这个TypeError,它告诉我事件侦听器为null,尽管它不是。有人能看到我哪里错了吗?

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>

1 回复 | 直到 2 年前

1

3

Paulo Fernando 2 年前

当JS运行时,页面中还没有创建元素。您可以将JS块移动到HTML块之后,也可以在其中添加JS:

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