Something is wrong with my code and I can't figure out why it won't click on the tiles. Nothing appears. Im assuming the problem is here tiles.forEach( (tile, index) => { tile.addEventListener('click', () => userAction(tile, index)); });. are my scripts connected properly maybe that's the problem ? Can someone tell me what's wrong?
window.addEventListener('DOMContentLoaded', () => {
const tiles = Array.from(document.querySelectorAll('.tile'));
const playerDisplay = document.querySelector('.display-player');
const resetButton = document.querySelector('#reset');
const announcer = document.querySelector('.announcer');
let board = ['', '', '', '', '', '', '', '', '',];
let currentPlayer = X;
let isGameActive = true;
const X_WON = 'X_WON';
const O_WON = 'O_WON';
const TIE = 'TIE';
/*
Board index
[0][1][2]
[3][4][5]
[6][7][8]
*/
const winningConditions = [
[0, 1, 2]
[3, 4, 5]
[6, 7, 8]
[0, 3, 6]
[1, 4, 7]
[2, 5, 8]
[0, 4, 8]
[2, 4, 6]
]
function handleResultValidation() {
let roundWon = false;
for (let i = 0; i <= 7; i ) {
const winCondition = winningConditions[i];
const a = board[winCondition[0]];
const b = board[winCondition[1]];
const c = board[winCondition[2]];
if (a === '' || b === '' || c === '') {
continue;
}
if (a === b && b === c) {
roundWon = true;
break;
}
}
if (roundWon) {
announce(currentPlayer === 'X' ? X_WON : O_WON);
isGameActive = false;
return;
}
if (!board.includes(''))
announce(TIE);
}
const announce = (type) => {
switch(type){
case O_WON:
announcer.innerHTML = `Player <span >O</span> Won`;
break;
case X_WON:
announcer.innerHTML = `Player <span >X</span> Won`;
break;
case TIE:
announcer.innerText = 'Tie'
}
announcer.classList.remove('hide');
};
const isValidAction = (tile) => {
if (tile.innerText === 'X' || tile.innerText === 'O'){
return false;
}
return true;
}
const updateBoard = (index => {
board[index] = currentPlayer;
})
const changePlayer = () => {
playerDisplay.classList.remove(`player${currentPlayer}`);
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
playerDisplay.innerText = currentPlayer;
playerDisplay.classList.add(`player${currentPlayer}`);
}
const userAction = (tile, index) => {
if(isValidAction(tile) && isGameActive) {
tile.innerText = currentPlayer;
tile.classlist.add(`player${currentPlayer}`);
updateBoard(index);
handleResultValidation();
changePlayer();
}
}
const resetBoard = () => {
board = ['', '', '', '', '', '', '', '', '',];
isGameActive = true;
announcer.classList.add('hide');
if (currentPlayer === 'O') {
changePlayer();
}
tiles.forEach(tile => {
tile.innerText = '';
tile.classList.remove('X')
tile.classList.remove('O')
});
}
tiles.forEach( (tile, index) => {
tile.addEventListener('click', () => userAction(tile, index));
});
resetButton.addEventListener('click', resetBoard);
});
* {
padding: 0;
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.background {
background-color: pink;
height: 100vh;
padding-top: 1px;
}
.title {
color: orange;
text-align: center;
font-size: 40px;
margin-top: 1%;
}
.display {
color: orange;
font-size: 25px;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
.hide {
display: none;
}
.container {
margin: 0 auto;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33%;
max-width: 900px;
}
.tile {
border: 5px solid orange;
min-width: 100px;
min-height: 250px;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
cursor: pointer;
}
.X {
color: aquamarine;
}
.O {
color: brown;
}
.controls {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#reset {
background-color: orange;
color: white;
padding: 8px;
border-radius: 8px;
border: none;
font-size: 20px;
margin-left: 1em;
cursor: pointer;
}
<!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="index.css">
<script src="index.js"></script>
<title>Tic-Tac-Toe</title>
</head>
<body>
<!-- <script src="index.js"></script> -->
<main >
<section >
<h1>Tic Tac Toe</h1>
</section>
<section >
Player <span >X</span>'s turn
</section>
<section >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</section>
<section ></section>
<section >
<button id="reset">Reset Game</button>
</section>
</main>
</body>
</html>
CodePudding user response:
- currentPlayer variable should be a string
'X'
not a variable nameX
let currentPlayer = 'X';
- You are missing comma
,
between your array
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
]
- classlist naming should be
classList
tile.classList.add(`player${currentPlayer}`);
CodePudding user response:
This is the error I get when I try to run your code, maybe start there: index.js line 8
- In index.js line 25 change
let currentPlayer = X;
tolet currentPlayer = "X";
2. Next error is fixed by adding comma delimiters to the array on each line:
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
]