Question

我有一个链接到事件侦听器的按钮。单击该按钮后，应该将段落的文本从“ Hello”更改为确认消息。但是，当我单击按钮时，什么也没有发生。我检查了控制台日志，但没有任何错误。脚本包含在头部（在标签中），而段落和按钮包含在正文中。

功能：

document.getElementById("sendForm").addEventListener("click", function() {
document.getElementById("formMessage").innerHTML = "Thank you for your feedback! We'll try to respond to your message promptly.";
});

按钮：

<input type="submit" value="Send" id="sendForm">

应该更改的位置：

<p id="formMessage">Hello</p>

Answer 1

如果输入标签在表单标签内，则该按钮用于提交表单，因此基本上页面在提交后会重新加载。在这种情况下，您可以像这样防止元素的默认操作。另外，如果脚本位于head标记内，请确保它被window.onload函数包装，以便在加载窗口之后设置绑定。

 window.onload = function(){
           document.getElementById("sendForm").addEventListener("click", function(e) {
           e.preventDefault();
           document.getElementById("formMessage").innerHTML = "Thank you for your feedback! We'll try to respond to your message promptly.";
        });
}

Answer 2

这是HTML的一些智慧：使用“按钮”标签将使您的生活变得更加轻松。

 <button onclick="func()">Hello</button>

 function func()
 {
    document.getElementById("formMessage").innerHTML = "Thank you for your feedback! We'll try to respond to your message promptly.";
 }

我刚刚注意到您正在使用“提交”输入。如果您使用的是表格，也可以执行以下操作：

 <form onsubmit="func()">
   <input type="submit"  value="Submit" />
 </form>

 function func()
 {
    document.getElementById("formMessage").innerHTML = "Thank you for your feedback! We'll try to respond to your message promptly.";
 }

这也可能是因为“ addeventlistener”行的放置不正确。如果该行在加载DOM之前运行，它将无法正常工作。我建议将其中之一添加到您的应用程序中：

 window.addEventListener('DOMContentLoaded', (event) => {
   document.getElementById("sendForm").addEventListener("click", func());
 });

OR

<body onload="functionYouWantToCallOncePageIsLoaded()">

链接到无法在HTML中使用的功能的按钮

2 个答案: