Question

事件监听器工作不到一秒钟，然后它就无法工作。

index.html文件：

inst

main.js文件：

self

日期显示不到一秒钟，然后它立即消失。

Answer 1

您必须取消表单提交

＆＃13;

var myForm = document.getElementById("my-form");
var lbl = document.getElementById("lbl");
var nextBtn = document.getElementById("next");

nextBtn.addEventListener("click", displayDate);

function displayDate() {
    
    lbl.innerHTML = Date();
}

document.getElementById('my-form').onsubmit = function() {
    return false;
};

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Javascript</title>
</head>
<body>

    <form id="my-form">
        <label id="lbl"></label>
        <button id="next">Next</button>
    </form>
</body>
</html>

＆＃13;

Answer 2

您正在单击表单内的按钮元素。默认按钮类型为submit，因此：

点击按钮
点击事件已触发
JS处理点击事件
表单已提交
浏览器加载新页面

...并且新页面没有您使用客户端代码进行的修改。

你可以采取几种方法。

最简单的是停止使用提交按钮。

将type="button"添加到<button>元素。

您还可以阻止按钮的默认行为（停止提交表单）：

function displayDate(event) {
    event.preventDefault();
    lbl.innerHTML = Date();
}

Answer 3

问题是，您使用表单。单击按钮后重新加载，所以一切都重置。

var myForm = document.getElementById("my-form");
var lbl = document.getElementById("lbl");
var nextBtn = document.getElementById("next");

nextBtn.addEventListener("click", displayDate);


myForm.addEventListener('submit', handleForm);

function handleForm(event) 
 {
 event.preventDefault();
 } 


function displayDate() 
{
 lbl.innerHTML = Date();
}

这可以防止提交重新加载页面。

我的addEventListener无法正常工作

3 个答案: