Taras Yaremkiv Taras Yaremkiv - 1 month ago 11
Javascript Question

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>