單擊第一個事件偵聽器后退出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>