与jquery结合使用时的Javascript循环问题

Javascript loop issue when combined with jquery

本文关键字：Javascript 循环 问题 jquery 结合      更新时间：2023-09-26

所以我试图让它每次点击它都会改变颜色。但是，我在使循环工作时遇到问题。它工作一次，但之后就不起作用了，我尝试了几种不同的方法，但无法让它工作不止一次。任何帮助都会很棒！

  <!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="490" style= background:black;>
</canvas>
<script>
</script>
<script>
function colorChecker(colorChanger) {
    if (colorChanger == 1) {
        ctx.fillStyle = 'green';}
    if (colorChanger == 2) {
        ctx.fillStyle = 'red';}
    if (colorChanger == 3) {
        ctx.fillStyle = 'yellow';}
    if (colorChanger == 4) {
        ctx.fillStyle = 'purple';}
    if (colorChanger == 5) {
        ctx.fillStyle = 'blue';}
    }

var onOff = true;
var c = document.getElementById("myCanvas");
c.addEventListener('click',function() {
    var colorChanger = 1;
     if (colorChanger < 6) {
        colorChanger++;
        colorChecker(colorChanger);
    }
    else {
        colorChanger = 1;
        colorChecker(colorChanger);
    }
}
);
var ctx = c.getContext("2d");
ctx.fillStyle = 'green';


var fallingWords = ["Java", "if", "else", "elsif", "True", "False", "null", "C++", "Python", "Math.random()", "X", "Y", "while", "do", "for", "loop", "import", "var", "let", "()", "{}", "arrays", "and", "or", "not"];

var things = [];
var objectNumber = 150;
for (var i = 0; i < objectNumber; i++) {
    var a = {};
    //randomly pick one tag
    a.code = fallingWords[Math.round(Math.random() * fallingWords.length)];
    a.x = Math.random() * 800;
    a.y = Math.random() * 490 - 490;
    a.speed = Math.random() * 10;
    things.push(a);
}
setInterval(function () {
    ctx.clearRect(0, 0, 800, 490);
    for (var i = 0; i < objectNumber; i++) {
        var a = things[i];
        ctx.fillText(a.code, a.x, a.y);
        a.y += a.speed;
        if (a.y > 600) a.y = -50;
    }
}, 90);
if (onOff === false) {
    objectNumber = 0;    
}
else {
    objectNumber = 150;   
}
</script>
</body>
</html>

在事件侦听器中，colorChanger始终为 1：

.addEventListener('click',function() {
    //THIS NEEDS TO BE DECLARED OUTSIDE THIS FUNCTION
    var colorChanger = 1;
     if (colorChanger < 6) {
        colorChanger++;
        colorChecker(colorChanger);
    }
    else {
        colorChanger = 1;
        colorChecker(colorChanger);
    }
}
);
相关文章：