Button onclick does not execute function

I have a problem with my fiddle:https://jsfiddle.net/5L7etues/ button onclick="myValami()" , doesn't seem to work.. This button should execute clearinterval inside function "myValami", but it does nothing. I went through spelling, checked it more than once. I scrolled through several questions, neither seems to fix my problem. I even tried copying the code from W3schools step-by-step https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_clearinterval but still doesnt't work. I suspect I am missing something blatantly obvious. I appreciate any answers !

---

使用addEventListener附加事件侦听器，而不是内联JavaScript：

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>

---

fixed:

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

put an id for the button (for example id="btnStop") and use the function as following:

btnStop.onclick = function() {
clearInterval(interval);
}

链接地址: http://www.djcxy.com/p/75000.html

上一篇: 在C ++中使用按位运算符进行布尔运算

下一篇: 按钮onclick不执行功能