Question

我有以下按钮：

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

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

function clearTDLoop(){ 

    clearInterval(viewsLoop);
}

如果我通过按钮的onclick属性调用该函数。即： 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

我为您设置了示例代码，请检查一下：

＆＃13;

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

＆＃13;

#result {
  padding: 15px 0 0;
}

＆＃13;

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

＆＃13;

Button的onclick有效，但JS事件监听器没有

2 个答案: