javascript - I am trying to make an array[ i ] 'glow' in order assigned. Why is my code not working? -

i attempting make simon game. i'm trying use glowinorder() function make divs glow in order of array. unfortunately first div in array glows, not others follow. (when 'glow', mean add effect looks glow using css.) suspect issue in glowinorder() function, unable find issue.

here's code (also on codepen):

var colorarray = ["red", "blue", "green", "yellow", "pink"];  var player = [];  var computer = [];  var round = 0;  var randomorder;  var mycolor;  var chosencolor;    //--------------------------------------------------------//      function makeglow(yolo) {      $(yolo).addclass('hover');      settimeout(function() {      $(yolo).removeclass('hover');    }, 300);    }      //--------------------------------------------------------//      function makeglowtwo(yolo) {    settimeout(function() {      $(yolo).addclass('hover');    }, 500);      settimeout(function() {      $(yolo).removeclass('hover');    }, 800);  }      //--------------------------------------------------------//      function newgame() {    player = [];    computer = [];    round = 0;  }      //---------------------------------------------------------//      function playerchoice() {    $('.all').on('click', function(e) {      player.push(e.target.id);      makeglow(this);    });  };      //---------------------------------------------------------//      function computerchoice() {    randomorder = math.floor(math.random() * colorarray.length);    mycolor = colorarray[randomorder];    computer.push(mycolor);    chosencolor = "#" + mycolor;    makeglowtwo(chosencolor);  }      //--------------------------------------------------------//      function newround() {    round++;    glowinorder();  }      //---------------------------------------------------------//      function glowinorder() {    //computerchoice();//this may not work take out if find doesn't    var = 1;    var moves = setinterval(function() {      makeglowtwo(computer[i]);      i++;      if (i >= computer.length) {        clearinterval(moves);      }    }, 400)    }      //---------------------------------------------------------//      function arraysequal(arr1, arr2) {    if (arr1.length !== arr2.length)      return false;    (var = arr1.length; i--;) {      if (arr1[i] !== arr2[i])        return false;    }      return true;  }      //---------------------------------------------------------//  $(document).ready(function() {    newgame();    playerchoice();    computerchoice();    $('.all').on('click', function() {      if (arraysequal(computer, player)) {        alert('yes');        glowinorder();      }    });  });

* {    margin: 0;    padding: 0;  }    body {    background-color: black;  }    .all {    border-radius: 50%;    height: 100px;    width: 100px;  }    #red {    border: 5px solid red;    display: table;    margin-left: auto;    margin-right: auto;  }    #blue {    border: 5px solid blue;    border-radius: 50%;    float: right;    display: inline;  }    #green {    border: 5px solid green;    border-radius: 50%;    display: inline-block;  }    #yellow {    border: 5px solid yellow;    border-radius: 50%;    display: inline-block;    margin-left: 40px;  }    #pink {    border: 5px solid pink;    border-radius: 50%;    float: right;    display: inline;    margin-right: 40px;  }    .middlerow {    margin-top: 70px;    margin-bottom: 110px;  }    .gamecontainer {    height: 500px;    width: 500px;    margin-left: 25%;    margin-top: 10%;  }    .hover {    background-color: white;  }

<div class="container">    <div class="gamecontainer">      <div class="toprow">        <div id="red" class="all"></div>      </div>      <div class="middlerow">        <div id="green" class="all"></div>        <div id="blue" class="all"></div>      </div>      <div class="bottomrow">        <div id="yellow" class="all"></div>        <div id="pink" class="all"></div>      </div>    </div>  </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

two issues jump out:

1. you're calling computerchoice once, , adds 1 entry array. have 1 entry in computer @ index 0.

2. your glowinorder function starts i set 1, doesn't match entry in array. , naturally stops when i >= computer.length check.

you need ensure computer has correct number of entries (i'm guessing 5), , need start i = 0 start first 1 in glowinorder.

there other logic issues in code, that's what's going on in relation asked about. if work through in debugger (there's 1 built browser) you'll able sort other issues out.