Question

我正在开发一个游戏，在游戏中我有一组数字：

var moves = [1, 7, 3, 7, 5, 9, 3, 1];

每次用户单击按钮时，我都希望向用户显示一个元素。例如，当我第一次单击按钮时，它将弹出“ 1”，而下次单击按钮时，它将弹出“ 7”，等等。

我尝试在其上使用.forEach循环，但我立即获得所有显示的元素。如何一次获得一个元素？

   nextBtn.addEventListener("click", function() {
      moves.forEach(function(element) {
      console.log(element)
      })
    }
   )

Answer 1

您可以在点击函数外使用i % moves.length并赋予i=0，以便它以循环方式获取数组的值。

var moves = [1, 7, 3, 7, 5, 9, 3, 1];
var nextBtn = document.getElementById('btn');
var i=0;
nextBtn.addEventListener("click", function() {
   var index = i % moves.length;
   console.log(moves[index]);
   i++;
})

<button id='btn'>click me</button>

Answer 2

您可以做什么，您可以拥有一个变量，该变量实际存储点击次数。每次单击按钮时，它将增加1。

var counter = 0;
nextBtn.addEventListener("click", function() {
      console.log(moves[counter++]);
      counter = counter % moves.length;
    }
   )

Answer 3

向元素添加data-move="0"，类似

<div id="btn" data-move="0">next</div>

然后您可以通过更新数据属性来跟踪移动次数，而无需任何其他全局变量。

您的脚本变为：

var moves = [1, 7, 3, 7, 5, 9, 3, 1];
document.getElementById('btn').addEventListener("click", function() {
       //get the current index of move
       var index = parseInt(this.getAttribute("data-move"));

       //test if the move is valid
       if(moves[index]==undefined){
          alert("Game over")
          return;
       }

       console.log(moves[index]);
       //set the next move
       this.setAttribute("data-move",index+1);
    })

这里是fiddle

JS：每次点击的元素

3 个答案: