ボタンonclickが関数を実行しません

Question

私のフィドルに問題があります：https://jsfiddle.net/5L7etues/button onclick="myValami()"、動作していないようです..このボタンは関数 "myValami"内でclearintervalを実行する必要がありますが、何もしません。私はスペルを見て、それを何度もチェックした。私はいくつかの質問をスクロールし、いずれも私の問題を解決していないようです。私もW3schoolsのコードをステップバイステップhttps://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_clearintervalからコピーしようとしましたが、まだ動作しません。私は何かが露骨に明らかに欠けていると思う。私はどんな答えにも感謝しています！代わりにインラインのJavaScript

Answer 1

、addEventListenerを使用してイベントリスナーをアタッチ：

var c = document.getElementById("Canvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.fillStyle = "#ff0066"; 
 
ctx.fillRect(100, 100, 50, 50); 
 
var X = 100; 
 
var Y = 100; 
 
var W = 50; 
 
var H = 50; 
 
var interval = window.setInterval(myRect, 10); 
 

 
function myRect() { 
 
    ctx.fillRect(X, Y, W, H); 
 
    ctx.fillRect(X = X + 1, Y, W, H); 
 

 
} 
 

 
function myValami() { 
 
    clearInterval(interval); 
 
} 
 

 
var button = document.querySelector('button'); 
 
button.addEventListener('click', myValami);

<canvas id="Canvas" width="400" height="200" style="border:1px solid #000000;"></canvas> 
 
<button>STOP</button>

Answer 2

固定：

https://jsfiddle.net/5L7etues/4/

は、例えばIDの（ボタンのIDを置きます= "btnStop"）、次のように関数を使用します。

​​