首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Javascript Click事件将多个副本推送到数组

Javascript Click事件将多个副本推送到数组
EN

Stack Overflow用户
提问于 2017-12-12 02:32:25
回答 2查看 196关注 0票数 0

在重新创建Simon游戏时,我尝试将一个单击事件推送到一个数组,然后立即在嵌套函数中测试该数组。在第一次传递时,它似乎起作用了。

但是,在第三次运行时,数组似乎没有清除。

下面的屏幕截图还显示,每个输入都会多次打印到控制台。

完整的代码笔在这里- https://codepen.io/jhc1982/pen/NwQZRw?editors=1010

快速示例:

代码语言:javascript
运行
复制
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;
    }
   }    
  } 
 }
}

我确信这是非常明显的事情,但已经被卡住了几个小时。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-12-12 02:42:58

我认为问题可能在于您在每次执行userMoves时都会分配单击事件。这意味着每次调用函数时,事件都会被添加到元素中,因此在两次调用userMoves()之后,当您单击red时,事件将执行两次,在三次调用之后,它将执行三次,依此类推。

添加事件侦听器的代码应该在userMoves函数之外。testington函数也应该在userMoves之外,这将变得更简单:

代码语言:javascript
运行
复制
function userMoves() {
    $("#score-text").text(level);
    userInput = [];
}

这是一个有工作代码的钢笔:https://codepen.io/anon/pen/ppzqyY

票数 1
EN

Stack Overflow用户

发布于 2017-12-12 02:54:40

您需要在alert("Game over");之后添加break;关键字

代码语言:javascript
运行
复制
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;
   }
  }    
 } 
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47759172

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档