单击第一个事件侦听器后退出for循环

Question

我正在打井字棋盘，我希望用户能够单击棋盘上的九个框之一。 我实现了一个for loop以在每个div上运行，从而允许用户单击每个div。

选择框后，计算机将移动。

用户选择框后，如何停止循环？ 先感谢您

 //initial variables let box = document.querySelectorAll(".box"); let letter = document.querySelector('.letter'); let turn = 0; //START GAME let userXorO = function() { //function to determine whose x and o let X = 1; let O = 2; let random = Math.floor(Math.random() * 2) + 1; //randomizes between x and o if (random == X) { return 'X' } if (random == O) { return 'O' } return random; //returns random number to function } //PLAYER ONE INITIAL TURN function turn_one() { for (let i = 0; i < box.length; i++) { if (turn === 0) { box[i].addEventListener("click", function(e) { box[i].textContent = userXorO(); //draws first user X or O turn ++; }); } } } turn_one(); 

 .game-board { width: 600px; height: 600px; margin: 0 auto; background-color: #34495e; color: #fff; border: 6px solid #2c3e50; border-radius: 10px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } .box { border: 6px solid #2c3e50; border-radius: 2px; font-family: Helvetica; font-weight: bold; font-size: 4em; display: flex; justify-content: center; align-items: center; } .player_one { background-color: red; } 

 <div class="game-board"> <div id="1" class="box"><span id="1" class="letter"></span></div> <div id="2" class="box"><span id="2" class="letter"></span></div> <div class="box"><span id="3" class="letter"></span></div> <div class="box"><span id="" class="letter"></span></div> <div class="box"><span id="" class="letter"></span></div> <div class="box"><span id="" class="letter"></span></div> <div class="box"><span id="" class="letter"></span></div> <div class="box"><span id="" class="letter"></span></div> <div class="box"><span id="" class="letter"></span></div> </div> 

Answer 1

您可能会发现，如果您只向整个容器添加一个侦听器，那么您可能会发现逻辑更容易遵循，而不是添加人类在第一次选择某个框后可能尝试删除的多个侦听器（这称为事件委托 ），并且使用isHumanTurn类的变量检查点击是否当前有效。 （当然，如果计算机立即转动，则无需进行isHumanTurn检查。）

另请注意，同一文档中的重复ID是无效的HTML-最好将其删除。 （要检查其容器中单击的div的索引，可以在div的数组上使用indexOf ）

另一个问题是，您应该在游戏开始时构造一次随机的X或O ，而不是每次单击都构造一次 ，否则将不会保持一致。

例如：

 const humanTile = ['X', 'O'][Math.floor(Math.random() * 2)]; let isHumanTurn = true; function handleClick({ target }) { if (!target.matches('.box')) return; if (!isHumanTurn) return console.log('It is not your turn!'); target.textContent = humanTile; //draws first user X or O isHumanTurn = false; console.log('insert function call for computer to take its turn...'); } document.querySelector('.game-board').addEventListener('click', handleClick); 

 .game-board { width: 600px; height: 600px; margin: 0 auto; background-color: #34495e; color: #fff; border: 6px solid #2c3e50; border-radius: 10px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } .box { border: 6px solid #2c3e50; border-radius: 2px; font-family: Helvetica; font-weight: bold; font-size: 4em; display: flex; justify-content: center; align-items: center; } .player_one { background-color: red; } 

 <div class="game-board"> <div class="box"><span class="letter"></span></div> <div class="box"><span class="letter"></span></div> <div class="box"><span class="letter"></span></div> <div class="box"><span class="letter"></span></div> <div class="box"><span class="letter"></span></div> <div class="box"><span class="letter"></span></div> <div class="box"><span class="letter"></span></div> <div class="box"><span class="letter"></span></div> <div class="box"><span class="letter"></span></div> </div>