How to loop through an array that triggers an click event on each item in the array one at a time

Question

I am having trouble with something in my function. I am trying to trigger click events one after another with a short delay between each item of my array...if anybody can explain to me how to fix It and why. I will be very grateful for any help.

 var track3 = new Audio(); track3.src= 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'; head= $("#head").click (function (){ $("#head").css ("background-color","black"); $("#head").css({ opacity: 0.9}); track3.play (); setTimeout(function(){ $("#head").css({ opacity: 0.0 }); $("#head").css("background-color",""); }, 300); }); shoulders= $("#shoulders").click (function (){ $("#shoulders").css ("background-color","cyan"); track3.play(); setTimeout(function() { $("#shoulders").css("background-color",""); }, 300); }); knees= $("#knees").click (function (){ $("#knees").css ("background-color","mediumPurple"); track3.play (); setTimeout(function(){ $("#knees").css("background-color", ""); }, 300); }); toes= $("#toes").click (function (){ $("#toes").css ("background-color","mediumSpringGreen"); track3.play(); setTimeout(function() { $("#toes").css("background-color", ""); }, 300); }) var round= 0; var player= [ ]; var simon=[ ]; var pat= ["head", "shoulders", "knees", "toes"]; $(".start").click(function (){ simon=[ ]; player=[ ]; round=0; additionalRound(); }) function additionalRound(){ round ++; $("h2").html("Round:" +round); setTimeout(function() { $("h2").html("HEAD, SHOULDERS, KNEES, AND TOES!"); },2660); sequence(); } function sequence (){ simon.push(pat[Math.floor (Math.random ()*4 )]); blinkerBeats (); } function blinkerBeats() { for (var i = 0; i < simon.length; i++) { setTimeout(function() { $(simon[i]).trigger('click'); }, i * 800); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

Ok, I edited your question into readable code. Here's what are looking for:

function sequence (){
  simon.push(pat[Math.floor (Math.random ()*4 )]);
  blinkerBeats (simon);
}

function blinkerBeats(arr) {
  var timer = 0,
      interval = 800;
  arr.map(function(elem){
    timer++;
    setTimeout(function(){
      $('#'+elem).trigger('click');
    }, timer * interval)
  })
}

Right now, simon.push() in your sequence() function only adds 1 entry to the array. If you actually want a sequence, you probably want to do:

function sequence (times){
  for (i = 0; i < times; i++) {
    simon.push(pat[Math.floor (Math.random ()*4 )]);
  }
  blinkerBeats (simon);
}

Working example: Since I don't have your initial markup, I just used some simple <input> s to test the code. Please note I didn't change the rest of your functions (as I'm not familiar to their logic - I only changes sequence() and blinkerBeats() functions:

 var track3 = new Audio(); track3.src= 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'; head= $("#head").click (function (){ $("#head").css ("background-color","black"); $("#head").css({ opacity: 0.9}); track3.play (); setTimeout(function(){ $("#head").css({ opacity: 0.0 }); $("#head").css("background-color",""); }, 300); }); shoulders= $("#shoulders").click (function (){ $("#shoulders").css ("background-color","cyan"); track3.play(); setTimeout(function() { $("#shoulders").css("background-color",""); }, 300); }); knees= $("#knees").click (function (){ $("#knees").css ("background-color","mediumPurple"); track3.play (); setTimeout(function(){ $("#knees").css("background-color", ""); }, 300); }); toes= $("#toes").click (function (){ $("#toes").css ("background-color","mediumSpringGreen"); track3.play(); setTimeout(function() { $("#toes").css("background-color", ""); }, 300); }) var round= 0; var player= [ ]; var simon=[ ]; var pat= ["head", "shoulders", "knees", "toes"]; $(".start").click(function (){ simon=[ ]; player=[ ]; round=0; additionalRound(); }) function additionalRound(){ round ++; $("h2").html("Round:" +round); setTimeout(function() { $("h2").html("HEAD, SHOULDERS, KNEES, AND TOES!"); },2660); sequence($('#clicks').val()); } function sequence (times){ for (i = 0; i < times; i++) { simon.push(pat[Math.floor (Math.random ()*4 )]); } blinkerBeats (simon); } function blinkerBeats(arr) { var timer = 0, interval = 800; arr.map(function(elem){ timer++; setTimeout(function(){ $('#'+elem).trigger('click'); }, timer * interval) }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label><input type="checkbox" id="head"> Head</label> <label><input type="checkbox" id="shoulders">Shoulders</label> <label><input type="checkbox" id="knees">Knees</label> <label><input type="checkbox" id="toes">Toes</label> <hr /> Times: <input type="number" value="6" id="clicks" /> <input type="button" value="Start" class="start" /> <h2>Click start!</h2>