Javascript代碼在啓動時運行一次（addEventListener不工作）

這隻在啓動時運行一次，我不明白髮生了什麼。對不起，如果格式不好，這是我的第一個問題。Javascript代碼在啓動時運行一次（addEventListener不工作）

這是HTML代碼：

<!DOCTYPE html> 

<html> 
<head> 

<title>Clicker</title> 

</head> 

<body> 

<ul> 
    <li>Mouse</li> 
    <li>DangerMouse</li> 
    <li>Brain</li> 
    <li>Ratata</li> 
</ul> 
<img id="mouseElem" src="https://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="whoops" style="width:304ps;height:228px;"> 
<button type="button">Mouse1</button> 
<button type="button">DangerMouse</button> 
<button type="button">Brain</button> 
<button type="button">Ratata</button> 
<h2>Mouse</h2> 
<p>Number of Clicks: </p> 
<div id="presentClicks"><p></p></div> 

<script src="js/javardscript.js"></script> 

</body> 
</html>

，這是JavaScript代碼

var clickerCounter = 0; 

//document.getElementById('presentClicks').innerHTML = clickerCounter; 
document.getElementById('presentClicks').addEventListener('click', addClick(clickerCounter)); 
document.getElementById('mouseElem').addEventListener('click', boogaFunction()); 

function boogaFunction() { 
    alert("booga"); 
} 

function addClick(clickerCounter) { 
    clickerCounter++; 
    document.getElementById('presentClicks').innerHTML = clickerCounter; 
}

來源

2016-08-19 StackOvernizer

'document.get ....（'click'，boogaFunction（））;'這裏不要調用boogaFunction，只是發送引用。 ie'（'click'，boogaFunction）' – rajuGT

[javascript addEventlistener「click」not working]可能重複（http://stackoverflow.com/questions/33906015/javascript-addeventlistener-click-not-working） – trincot

作爲每https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener，所述arget.addEventListener(type, listener, [options]);期望一個聽者。

聽者，其接收通知時，指定類型的事件發生時（實現事件接口的對象）的對象。這必須是一個實現EventListener接口的對象，或者只是一個JavaScript函數。

因此，你必須引用功能，功能沒有結果。

document.getElementById('presentClicks').addEventListener('click', addClick); 
document.getElementById('mouseElem').addEventListener('click', boogaFunction);

及以下應進行重構，採取clickCounter從關閉。

function addClick() { 
    clickerCounter++; 
    document.getElementById('presentClicks').innerHTML = clickerCounter; 
}

來源

2016-08-19 10:38:50 Ioan

謝謝，貸款，這是有益的！ – StackOvernizer

不客氣！隨意標記爲已接受！:) - – Ioan

這裏的問題是您可能不知道如何將回調函數添加到事件偵聽器。

您可以糾正這樣（沒有()，這意味着你只需要參照回調函數）：

document.getElementById('mouseElem').addEventListener('click', boogaFunction);

與需要傳遞參數的回調，你不能做到像解決方案以上，則需要特殊的方式把它 - 用bind方法：

document.getElementById('presentClicks').addEventListener('click', addClick.bind(this, clickerCounter));

欲瞭解更多信息，你可以檢查出how to pass parameters to callback functions。

希望幫助;）

來源

2016-08-19 10:43:40

你有錯誤的JS

你可以改變它是這樣的：

var clickerCounter = 0; 

//document.getElementById('presentClicks').innerHTML = clickerCounter; 
document.getElementById('presentClicks').addEventListener('click', function(){ 
    addClick(clickerCounter); 
}); 
document.getElementById('mouseElem').addEventListener('click', boogaFunction); 

function boogaFunction() { 
    alert("booga"); 
} 

function addClick(clickerCounter) { 
    clickerCounter++; 
    document.getElementById('presentClicks').innerHTML = clickerCounter; 
}

來源

2016-08-19 10:44:32 XianChen

你應該寫：

document.getElementById('presentClicks').addEventListener('click', addClick); 
document.getElementById('mouseElem').addEventListener('click', boogaFunction);

只

addEventListener聽衆事件名稱，不帶「（）」

來源

2016-08-19 10:48:21 silence

和這個addClick函數不能有參數（如：clickerCounter）; – silence

Javascript代碼在啓動時運行一次（addEventListener不工作）

回答

相關問題