Question

我的小提琴有问题：https://jsfiddle.net/5L7etues/ button onclick="myValami()"，似乎无法正常工作..此按钮应在函数内执行clearinterval＆＃34; myValami＆＃34;，但它什么也没做。我经历了拼写，不止一次检查过。我滚动了几个问题，似乎都无法解决我的问题。我甚至尝试从W3schools逐步复制代码https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_clearinterval，但仍然无法正常工作。我怀疑我错过了一些明显的东西。我很感激任何答案！

Answer 1

使用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>

Answer 2

固定：

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

为按钮添加id（例如id =“btnStop”）并使用以下函数：

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

按钮onclick不执行功能

2 个答案: