Check if buttons are clicked in certain sequence JS

I would like to make Javascript check if buttons are clicked in certain order (I working on the “Simon Game”). An order is an array of number, and every number corresponds to certain div (button). But something is wrong with my code, and it doesn’t work.

The proper running code do this:

If I click right div-button and if I make a mistake it returns false, if all the sequence is clicked right return true.

  function getRandArray() {
    var array = [];
    for (var i = 0; i < 22; i++) {
      array[i] = Math.floor(Math.random() * 4 + 1);
    }
    return array;
  }
  var array = getRandArray();
  var elems = document.querySelectorAll('.bigButton');
  function checkSound(level) {
    var counter = 0;
    var checkArr = array.slice(0, level - 1);
    console.log(checkArr);
    for (var i = 0; i < elems.length; i++) {
      elems[i].addEventListener("click", function(e) {
        if (this.dataset.sound === checkArr[counter]) {
          counter++;
          console.log('right');
          return true;
        }
        return false;
      })
    }
  }
  checkSound(5);

.bigButton {
  height: 25px;
  width: 35px;
  border: 2px solid #464646;
  margin: 1em;
  text-align: center;
  padding-top: 5px;
  display: inline-block;
}

<div class="bigButton" id="greenButton" data-sound="1">1
</div>
<div class="bigButton" id="redButton" data-sound="2">2
</div>
<div class="bigButton" id="yellowButton" data-sound="3">3
</div>
<div class="bigButton" id="blueButton" data-sound="4">4
</div>

Answer

Try to replace === by == in :

if (this.dataset.sound == checkArr[counter]) {

Since the checkArr[counter] is a number and this.dataset.sound is a string and triple equals === will compare the type also so the consition will never be reached.

Or you could also parse the string to integer using parseInt() like :

if (parseInt(this.dataset.sound) === checkArr[counter]) {

Hope this helps.

function getRandArray() {
    var array = [];
    for (var i = 0; i < 22; i++) {
      array[i] = Math.floor(Math.random() * 4 + 1);
    }
    return array;
  }
  var array = getRandArray();
  var elems = document.querySelectorAll('.bigButton');
  function checkSound(level) {
    var counter = 0;
    var checkArr = array.slice(0, level - 1);
    console.log(checkArr);
    for (var i = 0; i < elems.length; i++) {
      elems[i].addEventListener("click", function(e) {
        if (this.dataset.sound == checkArr[counter]) {
          counter++;
          console.log('right');
          return true;
        }
        return false;
      })
    }
  }
  checkSound(5);

.bigButton {
  height: 50px;
  width: 80px;
  border: 2px solid #464646;
  margin: 1em;
  text-align: center;
  padding-top: 15px;
}

<div class="bigButton" id="greenButton" data-sound="1">1
</div>
<div class="bigButton" id="redButton" data-sound="2">2
</div>
<div class="bigButton" id="yellowButton" data-sound="3">3
</div>
<div class="bigButton" id="blueButton" data-sound="4">4
</div>
<br><br><br>