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不工作）

回答

相关问题