Javascript：单击 div/form 中的按钮不会执行 javascript 的意思吗？

Question

好的，所以我在 div 中有一个按钮。这是 HTML:

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

在此按钮之前，还有其他字段，如姓名、电子邮件和内容，这些都在一个表单中，ID 为 "contactForm"（在 div 和 class 名称 "container")。

我正在制作一个 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);
};

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

debugger/console 表示

Uncaught TypeError: Cannot read property 'addEventListener' of null

第48行，是这样的：

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

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

请帮忙，谢谢。

Answer 1

您是否检查过表单的 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>

Answer 2

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

将您的 javascript 代码放在标签后。

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

将您的代码放在 DOMContentLoaded 事件中。

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

Answer 3

如果您想使用 "Submit" 事件，您必须创建一个包含 <input type="submit"> 的表单，您的 ID 为“提交”的按钮不是有效的提交按钮。

为了简单起见，如果您希望在单击按钮时执行该功能，只需使用：

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);
});

Javascript：单击 div/form 中的按钮不会执行 javascript 的意思吗？

Javascript: Clicking a button inside a div/form not executing the javascript meant for it?

html

javascript

css

jquery

getelementbyid