我的addEventListener無法正常工作

Question

事件偵聽器在不到一秒鍾的時間內起作用，然后它不起作用。

index.html文件：

<!DOCTYPE html>
<html>
<head>
    <title>Javascript</title>
</head>
<body>

    <form id="my-form">
        <label id="lbl"></label>
        <button id="next">Next</button>
    </form>

    <script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js文件：

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

日期顯示不到一秒鍾，然后立即消失。

Answer 1

您必須取消表格提交

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

 <!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>

Answer 2

您正在單擊表單內的按鈕元素。 默認按鈕類型為submit因此：

點擊按鈕
點擊事件被觸發
JS處理click事件
表格已提交
瀏覽器加載新頁面

…並且新頁面沒有使用客戶端代碼進行的修改。

您可以在此處采取幾種方法。

最簡單的是停止使用提交按鈕 。

將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 個解決方案

解決方案1
1 2018-01-24 10:42:39

解決方案2
1 已采納 2018-01-24 10:51:26

解決方案3
1 2018-01-24 11:00:46

我的addEventListener無法正常工作

問題描述

3 個解決方案

解決方案1 1 2018-01-24 10:42:39

解決方案2 1 已采納 2018-01-24 10:51:26

解決方案3 1 2018-01-24 11:00:46

解決方案1
1 2018-01-24 10:42:39

解決方案2
1 已采納 2018-01-24 10:51:26

解決方案3
1 2018-01-24 11:00:46