Question

如何解决错误cannot read property of 'addEventListener' of null？当我在我的JS文件中添加此代码document.getElementById("myForm").addEventListener("submit", SaveBookmark)

时

 <form id="myForm">
      <input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
      <input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
      <button type="button" id="submitBtn">Submit</button>
 </form>

Answer 1

首先请注意，您正在调用DOM已加载或重复formID。这段代码工作正常。请将<button type="button">更改为<button type="submit" .../>

<form id="myForm">
      <input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
      <input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
      <button type="submit" id="submitBtn">Submit</button>
</form>
<script>

    document.getElementById("myForm").addEventListener("submit", SaveBookmark);

    function SaveBookmark() {
        alert('success');
    }

</script>

Answer 2

我不是专家，但为了避免这个错误你的JS应该是这样的

const myForm = document.getElementById("myForm");

if (myForm) {
  myForm.addEventListener("submit", SaveBookmark)
}

这可确保在添加事件侦听器之前存在表单元素

Answer 3

应该轻松工作：

document.getElementById('myForm').addEventListener('submit', function() {
  alert("yes!")
})

<form id="myForm">
      <input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
      <input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
      <button type="submit" id="submitBtn">Submit</button>
 </form>

Answer 4

它没有用，因为你有

<button type="button" id="submitBtn">Submit</button>

而不是：

<button type="submit" id="submitBtn">Submit</button>

并且您正试图达到提交活动。无论如何，我建议你不要因资源浪费而添加事件监听器。当它是唯一的选择时使用它。

我让你以另一种方式使用默认点击eventlistener达到相同的目的：

<form id="myForm">
      <input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
      <input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
      <button type="submit" id="submitBtn" onclick="saveBookmark()">Submit</button>
 </form>
 
 <script type="text/javascript">
 
function saveBookmark(){
	alert ("Bookmark saved");
}

 </script>

无论如何你都会点击提交按钮，使用onclick事件而不是创建eventlistener。它工作最简单，浪费的资源更少......

并且记得向表单添加action属性，尝试重新编程已定义的行为只会使您的软件在代码行和时间负载上变得沉重和沉重。这就是为什么知道语言的重要性。

希望有所帮助！

表单ID无法识别addEventListener

4 个答案: