Javascript 将onClick应用于For循环中的函数数组（每次单击按钮时执行的每个函数）_Javascript_Jquery_Loops

Javascript 将onClick应用于For循环中的函数数组（每次单击按钮时执行的每个函数）

javascript jquery loops

Javascript 将onClick应用于For循环中的函数数组（每次单击按钮时执行的每个函数）,javascript,jquery,loops,Javascript,Jquery,Loops,stackoverflow的人们好我希望在Javascript中使用一个按钮，在单击按钮时按顺序（一个接一个）执行一系列函数，而不是一次执行所有函数。（参见下面的功能显示）目前，所有函数都同时执行。有人能帮忙吗！？我想能够点击按钮，并有每个彩色方块出现在屏幕上一个接一个，在每个按钮点击 function red () { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="

stackoverflow的人们好

我希望在Javascript中使用一个按钮，在单击按钮时按顺序（一个接一个）执行一系列函数，而不是一次执行所有函数。（参见下面的功能显示）

目前，所有函数都同时执行。有人能帮忙吗！？我想能够点击按钮，并有每个彩色方块出现在屏幕上一个接一个，在每个按钮点击

function red () {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#red";
ctx.fillRect(20,60,23,23);
}

function blue() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#blue";
ctx.fillRect(20,100,23,23);
}

function green() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#green";
ctx.fillRect(20,20,23,23);
}


function functionarray() {
var array_of_functions = [
green,
red,
blue, 
]


for (i = 0; i < array_of_functions.length; i++) {
array_of_functions[i]();
}
}

function displayNext() {
var array_of_functions = [
green,
red,
blue, 
]

for (i = 0; i < array_of_functions.length; i++) {
array_of_functions[i].onclick = array_of_functions[i]();

//array_of_functions[i].onclick();

}
}

<p><button type="button" onclick="displayNext()">On Click, next                 colour</button></p>

</html>

功能红色（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#红色”；
ctx.fillRect（20,60,23,23）；
}
函数蓝（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#蓝色”；
ctx.fillRect（20100,23,23）；
}
函数green（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#绿色”；
ctx.fillRect（20,20,23,23）；
}
函数functionarray（）{
变量数组\u的函数=[
绿色
红色
蓝色
]
对于（i=0；i



下一种颜色

var canvas=document.getElementById（“myCanvas”），
ctx=canvas.getContext（“2d”），
红色=函数红色（）{
ctx.fillStyle=“#红色”；
ctx.fillRect（20,60,23,23）；
},
蓝色=函数蓝色（）{
ctx.fillStyle=“#蓝色”；
ctx.fillRect（20100,23,23）；
},
绿色=功能绿色（）{
ctx.fillStyle=“#绿色”；
ctx.fillRect（20,20,23,23）；
},
lastCall=0，
_函数的数组_=[绿色、红色、蓝色]，
displayNext=函数displayNext（）{
_函数的数组_[lastCall]（）；
lastCall+=1；
};
document.getElementById（'myID'）。addEventListener（'click'，displayNext'）；

Wow-没想到这么快会有回复！这是在“脚本”标记中的函数之后实现的吗？试过了，还是不太管用。。。。谢谢你！您希望让函数的数组和函数外部的最后调用显示下一个函数，而不是每次单击都再次创建数组。请稍微清理代码，以便（希望）更清晰。

<html>
<head>
    <title></title>
</head>
<body>
    <p>
        <button type="button" id="myID">next color</button>
    </p>
<script>
var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d"),
    red = function red() {
        ctx.fillStyle="#red";
        ctx.fillRect(20,60,23,23);
    },
    blue = function blue() {
        ctx.fillStyle="#blue";
        ctx.fillRect(20,100,23,23);
    },
    green = function green() {
        ctx.fillStyle="#green";
        ctx.fillRect(20,20,23,23);
    },
    lastCall = 0,
    array_of_functions = [green, red, blue],
    displayNext = function displayNext() {
        array_of_functions[lastCall]();
        lastCall += 1;
    };
document.getElementById('myID').addEventListener('click', displayNext);
</script>
</body>
</html>