'Where to put my removeEventListener in my source code
This is a connect4 game I'd learned from https://youtu.be/ec8vSKJuZTk?list=PLv4ZiliNOD5pTxDTlQ_yFM-ySHgbLl3um
I've tried putting my removeEventListener inside the loop and outside the loop, but neither way worked.
This is my HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Connect Four</title>
<script src="app.js" charset="utf-8"></script>
<!-- script can also put in the header , check out the js file to see how it works -->
</head>
<body>
<h3>The current player is player: <span id="current-player"></span></h3>
<h3 id="result"></h3>
<!-- 7 x 6 grid, plus with secret seven = total 49 -->
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="taken"></div>
<div class="taken"></div>
<div class="taken"></div>
<div class="taken"></div>
<div class="taken"></div>
<div class="taken"></div>
<div class="taken"></div>
</div>
</body>
</html>
And this is my javascript code.
document.addEventListener('DOMContentLoaded', () => {
const squares = document.querySelectorAll('.grid div') //every div inside class grid
const result = document.getElementById('result')
const displayCurrentPlayer = document.querySelector('#current-player')
let currentPlayer = 1
//all possible winning arrays combination
const winningArrays = [
[0, 1, 2, 3],
[41, 40, 39, 38],
[7, 8, 9, 10],
[34, 33, 32, 31],
[14, 15, 16, 17],
[27, 26, 25, 24],
[21, 22, 23, 24],
[20, 19, 18, 17],
[28, 29, 30, 31],
[13, 12, 11, 10],
[35, 36, 37, 38],
[6, 5, 4, 3],
[0, 7, 14, 21],
[41, 34, 27, 20],
[1, 8, 15, 22],
[40, 33, 26, 19],
[2, 9, 16, 23],
[39, 32, 25, 18],
[3, 10, 17, 24],
[38, 31, 24, 17],
[4, 11, 18, 25],
[37, 30, 23, 16],
[5, 12, 19, 26],
[36, 29, 22, 15],
[6, 13, 20, 27],
[35, 28, 21, 14],
[0, 8, 16, 24],
[41, 33, 25, 17],
[7, 15, 23, 31],
[34, 26, 18, 10],
[14, 22, 30, 38],
[27, 19, 11, 3],
[35, 29, 23, 17],
[6, 12, 18, 24],
[28, 22, 16, 10],
[13, 19, 25, 31],
[21, 15, 9, 3],
[20, 26, 32, 38],
[36, 30, 24, 18],
[5, 11, 17, 23],
[37, 31, 25, 19],
[4, 10, 16, 22],
[2, 10, 18, 26],
[39, 31, 23, 15],
[1, 9, 17, 25],
[40, 32, 24, 16],
[9, 17, 25, 33],
[8, 16, 24, 32],
[11, 17, 23, 29],
[12, 18, 24, 30],
[1, 2, 3, 4],
[5, 4, 3, 2],
[8, 9, 10, 11],
[12, 11, 10, 9],
[15, 16, 17, 18],
[19, 18, 17, 16],
[22, 23, 24, 25],
[26, 25, 24, 23],
[29, 30, 31, 32],
[33, 32, 31, 30],
[36, 37, 38, 39],
[40, 39, 38, 37],
[7, 14, 21, 28],
[8, 15, 22, 29],
[9, 16, 23, 30],
[10, 17, 24, 31],
[11, 18, 25, 32],
[12, 19, 26, 33],
[13, 20, 27, 34],];
// the squares will be stored in an array
function checkBoard(){
for (let y = 0; y < winningArrays.length ;y++){
const square1 = squares[winningArrays[y][0]]
const square2 = squares[winningArrays[y][1]]
const square3 = squares[winningArrays[y][2]]
const square4 = squares[winningArrays[y][3]]
//check those squares to see if they all have class of player one or the player two
if(
square1.classList.contains('player-one') &&
square2.classList.contains('player-one') &&
square3.classList.contains('player-one') &&
square4.classList.contains('player-one')
) {
result.innerHTML = 'Player One Wins';
}
if(
square1.classList.contains('player-two') &&
square2.classList.contains('player-two') &&
square3.classList.contains('player-two') &&
square4.classList.contains('player-two')
) {
result.innerHTML = 'Player Two Wins';
}
}
}
for (let i = 0; i < squares.length; i++){
var checkAndSwitchPlayer = () =>{
if (squares[i + 7].classList.contains('taken') && !squares[i].classList.contains('taken')){
if (currentPlayer === 1){
squares[i].classList.add('player-one')
squares[i].classList.add('taken')
//its like swith to other player's turn
currentPlayer = 2
displayCurrentPlayer.innerHTML = currentPlayer
} else if (currentPlayer === 2){
squares[i].classList.add('player-two')
squares[i].classList.add('taken')
currentPlayer = 1
displayCurrentPlayer.innerHTML = currentPlayer
}
} else alert('You cant go there bro');
checkBoard();}
squares[i].addEventListener('click',checkAndSwitchPlayer)
;
}
})
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|