javascript - 检查按钮是否按一定顺序被点击 JS

Question

我想让 Javascript 检查按钮是否按特定顺序单击(我正在研究“Simon Game”)。订单是一个数字数组，每个数字对应于某个div(按钮)。但我的代码有问题，它不起作用。

正确的运行代码执行以下操作:

如果我点击右侧div-button，如果我犯了一个错误，它会返回false，如果所有序列都被点击右侧，则返回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 1

尝试将以下内容中的 === 替换为 ==:

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

由于 checkArr[counter] 是一个数字，而 this.dataset.sound 是一个字符串，并且三重等于 === 将进行比较类型也因此永远不会达到条件。

或者您也可以使用 parseInt() 将字符串解析为整数，如下所示:

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

希望这有帮助。

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>