Javascript:点击div/form中的按钮没有执行为它准备的javascript?

Question

好的，所以我在div里面有一个按钮。这是那段 HTML：

<div class="row">
<button type="button" id="submit">Send</button>
</div>

在此按钮之前，还有其他字段，如姓名、电子邮件等，这些字段都在表单中，ID 为"contactForm"(位于类名为"容器"的div 内(。

我正在制作一个JS文件。我正在尝试获取它，以便当用户输入所有信息(如名称和内容(并点击提交时，它将控制台.log((名称。JS部分如下所示：

// Listen for submit btn click
document.getElementById('contactForm').addEventListener('submit', submitForm);
function submitForm(e) {
e.preventDefault();
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var message = document.getElementById('message').value;
console.log(name);
};

是的，所以这部分对我来说看起来不错，但是当我进入网站所在的本地主机时，我将任何随机内容放入名称、电子邮件和消息字段中，然后点击提交，什么也没发生。

调试器/控制台显示

未捕获的类型错误：无法读取 null 的属性"addEventListener">

在第 48 行，是这样的：

document.getElementById('contactForm').addEventListener('submit', submitForm);

我今天开始学习js，很新，但我在网上找不到解决这个问题的东西。我发现一些建议我将大的JS部分放在document.ready函数中，这样它就可以在加载所有内容后运行。如果我这样做，我尝试过，没有错误(如第 48 行(。它只是什么也没说，点击 btn 也没做任何事情(比如，没有像我想要的那样显示名称(。

请帮忙，谢谢。

Answer 1

如果你想使用"提交"事件，你必须制作一个有<input type="submit">的表单，你的id'submit'按钮不是有效的提交按钮。

简单来说，如果您希望在单击按钮时执行该函数，只需使用以下命令：

document.getElementById('submit').addEventListener("click", function(){
e.preventDefault();
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var message = document.getElementById('message').value;
console.log(name);
});  

Answer 2

您可能甚至在加载 DOM 之前就尝试附加事件。您可以为此使用多种解决方案。

1. 将 JavaScript 代码放在标签之后。

   <form id='contactForm'></form>
   <script>**** All your JavaScript goes here **** </script>
   

2. 将代码放在DOMContentLoaded事件中。

   document.addEventListener("DOMContentLoaded", function(event) {
   document.getElementById('contactForm').addEventListener('submit', submitForm);
   });
   

Answer 3

您是否检查过表单的ID拼写错误？ 此外，您可以将提交按钮更改为简单的div，并在阻止默认行为时添加 OnClick 事件处理程序。像这样使用它：

document.getElementById('submit').onclick=function(){document.getElementById('my-test-p').innerHTML='Submit was clicked'}

<button type="button" id="submit">Send</button>
<p id='my-test-p'></p>