So I'm making a basic tic tac toe app using html/css and javascript, however, I keep getting this error "script.js:13 Uncaught TypeError: Cannot read property 'addEventListener' of null at playBtn (script.js:13) at HTMLDocument. (script.js:8)". Everywhere I search says it is because my javascript is being loaded before my DOM so I wrapped my javascript in the document.addEventListener("DOMContentLoaded", function (event) {} function but I'm still getting this error. Help will be much appreciated. Added html and js code below. ps. still new to html/css/js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
<link rel="stylesheet" href="resources/css/style.css">
<title>Tic Tac Toe</title>
</head>
<body>
<!--row 1 -->
<h1>Tic Tac Toe</h1>
<div class="container">
<div class="player1-text">
<h2>Player 1</h2>
</div>
<div class="game-container">
<div class="tile-1">
<ion-icon name="close-outline"></ion-icon>
<ion-icon name="ellipse-outline"></ion-icon>
</div>
<div class="tile-2">
<ion-icon name="close-outline"></ion-icon>
<ion-icon name="ellipse-outline"></ion-icon>
</div>
<div class="tile-3">
<ion-icon name="close-outline"></ion-icon>
<ion-icon name="ellipse-outline"></ion-icon>
</div>
<!--row 2 -->
<div class="tile-4">
<ion-icon name="close-outline"></ion-icon>
<ion-icon name="ellipse-outline"></ion-icon>
</div>
<div class="tile-5">
<ion-icon name="close-outline"></ion-icon>
<ion-icon name="ellipse-outline"></ion-icon>
</div>
<div class="tile-6">
<ion-icon name="close-outline"></ion-icon>
<ion-icon name="ellipse-outline"></ion-icon>
</div>
<!--row 3 -->
<div class="tile-7">
<ion-icon name="close-outline"></ion-icon>
<ion-icon name="ellipse-outline"></ion-icon>
</div>
<div class="tile-8">
<ion-icon name="close-outline"></ion-icon>
<ion-icon name="ellipse-outline"></ion-icon>
</div>
<div class="tile-9">
<ion-icon name="close-outline"></ion-icon>
<ion-icon name="ellipse-outline"></ion-icon>
</div>
</div>
<div class="player2-text">
<h2>Player 2</h2>
</div>
</div>
<div>
<button class="play-btn">
Play game
</button>
</div>
<script src="resources/js/script.js"></script>
</body></html>
document.addEventListener("DOMContentLoaded", function (event) {
var activePlayer, gamePlaying;
var p1Checks, p2Checks;
var playButton = document.querySelector('play-btn');
init();
playBtn();
function playBtn() {
playButton.addEventListener('click', function () {
gamePlaying = true;
activePlayer = 1;
for (var i = 1; i < 10; i++) {
clickTiles(i);
}
});
}
function clickTiles(i) {
document.querySelector('.tile-' + i).addEventListener('click', function () {
if (activePlayer === 1) {
document.querySelector('.tile-' + i).classList.add('p1-t' + i);
p1Checks[i - 1] = 1;
checkP1Win();
} else {
document.querySelector('.tile-' + i).classList.add('p2-t' + i);
p2Checks[i - 1] = 1;
checkP2Win();
}
document.querySelector('.tile-' + i).classList.add('clicked');
nextPlayer();
});
}
function nextPlayer() {
if (activePlayer === 1) {
activePlayer = 2;
} else {
activePlayer = 1;
}
for (var i = 1; i < 10; i++) {
if (activePlayer === 2) {
document.querySelector('.tile-' + i).classList.remove('player-1');
document.querySelector('.tile-' + i).classList.add('player-2');
} else {
document.querySelector('.tile-' + i).classList.remove('player-2');
document.querySelector('.tile-' + i).classList.add('player-1');
}
}
}
function init() {
//initialise evrything here
gamePlaying = false;
p1Checks = [0, 0, 0, 0, 0, 0, 0, 0, 0];
p2Checks = [0, 0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 1; i < 10; i++) {
document.querySelector('.tile-' + i).classList.remove('player-1');
document.querySelector('.tile-' + i).classList.remove('player-2');
document.querySelector('.tile-' + i).classList.remove('p1-t' + i);
document.querySelector('.tile-' + i).classList.remove('p2-t' + i);
}
}
function checkP1Win() {
//all possible win conditions
if (p1Checks[0] == 1 && p1Checks[1] == 1 && p1Checks[2] == 1) {
alert("Player 1 wins!");
} else if (p1Checks[0] === 1 && p1Checks[3] === 1 && p1Checks[6] === 1) {
alert("Player 1 wins!");
} else if (p1Checks[0] === 1 && p1Checks[4] === 1 && p1Checks[8] === 1) {
alert("Player 1 wins!");
} else if (p1Checks[1] === 1 && p1Checks[4] === 1 && p1Checks[7] === 1) {
alert("Player 1 wins!");
} else if (p1Checks[2] === 1 && p1Checks[4] === 1 && p1Checks[6] === 1) {
alert("Player 1 wins!");
} else if (p1Checks[2] === 1 && p1Checks[5] === 1 && p1Checks[8] === 1) {
alert("Player 1 wins!");
} else if (p1Checks[3] === 1 && p1Checks[4] === 1 && p1Checks[5] === 1) {
alert("Player 1 wins!");
} else if (p1Checks[6] === 1 && p1Checks[7] === 1 && p1Checks[8] === 1) {
alert("Player 1 wins!");
}
}
function checkP2Win() {
//all possible win conditions
if (p2Checks[0] == 1 && p2Checks[1] == 1 && p2Checks[2] == 1) {
alert("Player 2 wins!");
} else if (p2Checks[0] === 1 && p2Checks[3] === 1 && p2Checks[6] === 1) {
alert("Player 2 wins!");
} else if (p2Checks[0] === 1 && p2Checks[4] === 1 && p2Checks[8] === 1) {
alert("Player 2 wins!");
} else if (p2Checks[1] === 1 && p2Checks[4] === 1 && p2Checks[7] === 1) {
alert("Player 2 wins!");
} else if (p2Checks[2] === 1 && p2Checks[4] === 1 && p2Checks[6] === 1) {
alert("Player 2 wins!");
} else if (p2Checks[2] === 1 && p2Checks[5] === 1 && p2Checks[8] === 1) {
alert("Player 2 wins!");
} else if (p2Checks[3] === 1 && p2Checks[4] === 1 && p2Checks[5] === 1) {
alert("Player 2 wins!");
} else if (p2Checks[6] === 1 && p2Checks[7] === 1 && p2Checks[8] === 1) {
alert("Player 2 wins!");
}
}
function playerWins() {
//add code here to make all the tiles unclickable and then display who won
}
function playAgainBtn() {
//button to initialise evrything when pressed
}
});
