ボタンのonclickの作品が、JSのイベントリスナーは、私は、次のボタンを持ってい

Question

ん：

私は次の関数を実行したい

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

（viewsLoopがグローバル変数です）：

function clearTDLoop(){ 

    clearInterval(viewsLoop); 
} 

もしIボタンのonclick属性を使用して関数を呼び出します。すなわち： onclick="clearTDLoop()"完璧に動作します。

しかし、私はJSイベントリスナーを介してこの関数を呼びたいと思いますが、それはまったく機能しません。あなたは私が間違っているかもしれない何らかのアイデアを持っていますか？私のイベントリスナーのコードが添付されています前に、混乱のため

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

SRY、私のコード例では、ボタンのIDとして「スタートボタン」を述べたところ、私は間違ったIDをコピーし、問題が解決しない..

Answer 1

私はそれをチェックしてください、あなたのためのサンプルコードを設定しました：

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>

Answer 2

に見えますあなたのイベントリスナーのために間違ったIDを持っているように：

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

は次のようになります。

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