按钮的 onclick 有效，但 JS 事件侦听器无效

Question

我有以下按钮：

<input type="button" class ="anhalteButton" id="StopButton" value="&#9611 &#9611"/>

我要执行以下函数（viewsLoop是一个全局变量）：

function clearTDLoop(){ 

    clearInterval(viewsLoop);
}

如果我通过按钮的 onclick 属性调用函数。 IE。： onclick="clearTDLoop()" 它运行完美。

但是，我想通过一个JS事件监听器来调用这个函数，但是那根本行不通。你们知道我可能做错了什么吗？附上我的事件监听器代码：

var stopButtonEl = document.getElementById("StopButton");
stopButtonEl.addEventListener("click",clearTDLoop);

抱歉之前的混淆，我的代码示例将 "StartButton" 作为按钮 ID，我复制了错误的 ID，问题仍然存在..

Answer 1

您的事件侦听器 ID 似乎有误：

var startButtonEl = document.getElementById("StartButton");
startButtonEl.addEventListener("click",clearTDLoop);

应该是：

var stopButtonEl = document.getElementById("StopButton");
stopButtonEl.addEventListener("click",clearTDLoop);

Answer 2

我已经为您设置了示例代码，请查看：

var tdLoop;
var counter = 0;

var startButton = document.getElementById('startButton');
startButton.addEventListener('click', startTDLoop, false);

var stopButton = document.getElementById('stopButton');
stopButton.addEventListener('click', clearTDLoop, false);

var result = document.getElementById('result');

function startTDLoop() {
  tdLoop = setInterval(updateValue, 1000);
}

function updateValue() {
  counter++;
  result.innerHTML = counter;
}

function clearTDLoop() {
  counter = 0;
  clearTimeout(tdLoop);
}

#result {
  padding: 15px 0 0;
}

<input type="button" class ="anhalteButton" id="startButton" value="Start"/>
<input type="button" class ="anhalteButton" id="stopButton" value="Stop"/>

<div id="result"></div>

按钮的 onclick 有效，但 JS 事件侦听器无效

Button's onclick works but JS event listener does not

html

javascript

onclick

addeventlistener

mouseclick-event