Javascript Click事件将多个副本推送到数组
提问于 2017-12-11 18:32:25
在重新创建Simon游戏时，我尝试将一个单击事件推送到一个数组，然后立即在嵌套函数中测试该数组。在第一次传递时，它似乎起作用了。
但是，在第三次运行时，数组似乎没有清除。
下面的屏幕截图还显示，每个输入都会多次打印到控制台。
完整的代码笔在这里- https://codepen.io/jhc1982/pen/NwQZRw?editors=1010
快速示例：
function userMoves() {
var userInput = [];
document.getElementById("red").addEventListener("click", function(){
userInput.push("red");
testington();
});
$(".red").mousedown(function(event){
redAudio.play();
$(".red").css("background-color", "red");
});
$(".red").mouseup(function(){
$(".red").css("background-color", "#990000");
});
function testington(){
if (userInput.length == pattern.length) {
for (var i = 0; i < userInput.length; i++) {
if (userInput[i] !== pattern[i]) {
alert("Game Over");
} else if (i === userInput.length -1 && userInput[i] === pattern[i]) {
userInput = emptyArr;
simonMoves();
console.log("user input is ",userInput);
} else {
continue;
}
}
}
}
}我确信这是非常明显的事情，但已经被卡住了几个小时。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-12-11 18:42:58
我认为问题可能在于您在每次执行userMoves时都会分配单击事件。这意味着每次调用函数时，事件都会被添加到元素中，因此在两次调用userMoves()之后，当您单击red时，事件将执行两次，在三次调用之后，它将执行三次，依此类推。
添加事件侦听器的代码应该在userMoves函数之外。testington函数也应该在userMoves之外，这将变得更简单：
function userMoves() {
$("#score-text").text(level);
userInput = [];
}这是一个有工作代码的钢笔：https://codepen.io/anon/pen/ppzqyY
Stack Overflow用户
发布于 2017-12-11 18:54:40
您需要在alert("Game over");之后添加break;关键字
function testington(){
if (userInput.length == pattern.length) {
for (var i = 0; i < userInput.length; i++) {
if (userInput[i] !== pattern[i]) {
alert("Game Over");
break; // Break the loop
} else if (i === userInput.length -1 && userInput[i] === pattern[i]) {
userInput = emptyArr;
simonMoves();
console.log("user input is ",userInput);
} else {
continue;
}
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47759172
复制相关文章
腾讯云开发者
