Button onclick führt keine Funktion aus

Question

Ich habe ein Problem mit meiner Geige: https://jsfiddle.net/5L7etues/button onclick="myValami()", scheint nicht zu funktionieren. Diese Schaltfläche sollte clearinterval innerhalb der Funktion "myValami" ausführen, aber es tut nichts. Ich ging durch die Rechtschreibung, überprüfte es mehr als einmal. Ich blätterte einige Fragen durch, beide schienen mein Problem nicht zu lösen. Ich habe sogar versucht, den Code von W3schools Schritt für Schritt https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_clearinterval zu kopieren, funktioniert aber immer noch nicht. Ich vermute, ich vermisse etwas offensichtlich Offensichtliches. Ich schätze jede Antwort!

Answer 1

statt Inline JavaScript, befestigen Sie den Hörer Ereignis mit 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

behoben:

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

stellen eine ID für die Schaltfläche (zB ID = "btnStop") und verwende die Funktion wie folgt: