Javascript：单击div / form内的按钮不执行用于它的JavaScript？

Question

好吧，所以我在div内有一个按钮。 这是HTML的一部分：

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

在此按钮之前，还有其他字段，例如名称，电子邮件和内容，这些字段都在表单内，其ID为“ contactForm”（位于类名称为“ container”的div中）。

我正在制作一个JS文件。 我正在尝试获取它，以便当用户输入所有信息（例如名称和内容）并点击提交时，它将console.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);
};

是的，所以这部分对我来说很好，但是当我进入网站所在的本地主机时，我在名称，电子邮件和消息字段中放入了任意随机内容，然后单击了提交，则什么都没有发生。

调试器/控制台说

未捕获的TypeError：无法读取null的属性'addEventListener'

在第48行，这是：

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

我今天开始学习js，这是一个非常新的东西，但是我找不到任何可以解决此问题的在线方法。 我发现有人建议我将大的JS部分放在document.ready函数中，以便它在加载所有内容后运行。 如果我尝试了，那就没有错误（就像第48行一样）。 它只是什么也没说，单击btn也不做任何事（例如，不显示我想要的名称）。

请帮助，谢谢。

Answer 1

您甚至可能在加载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 2

如果要使用“ Submit”事件，则必须制作一个具有<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 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>