I am currently developing a tic-tac-toe game with 9 buttons that will display either an X or O image depending on the boolean value of the variable isX.
The main container for these buttons is a div element with the id 'stage' and each button has the class 'square'. However, when I added a listener to the 'stage', the function clickHandler was not recognized and Chrome threw an error:
Uncaught ReferenceError: clickHandler is not defined 2Players.html:38
(anonymous function)
This is how my HTML, CSS, and JavaScript are structured:
<body>
<div id="stage">
</div>
</body>
#stage{
width: 400px;
height: 400px;
padding: 0px;
position: relative;
}
.square{
width: 64px;
height: 64px;
background-color: gray;
position: absolute;
}
const ROWS = 3;
const COLS = 3;
const GAP = 10;
const SIZE = 64;
var stage = document.querySelector("#stage");
var lotOfButtons = [];
var winningPatterns = ["123","159","147",
"258","357","369",
"456","789"];
var isX = true;
var player1Pattern = "";
var player2Pattern = "";
stage.addEventHandler("click",clickHandler,false);
... (The rest of the JavaScript code continues here) ...