Trying to set move in tic tac toe game, but I keep getting undefined when the function is called
I'm not sure what I am doing wrong. I am calling my function from addEventListener
down at the bottom but for some reason my function is setMove
giving me undefined. I am trying to put an "X" or "O" on one of the buttons when pressed, and the way I do it is to set my variable buttonClicked
which will give me a DOM object, then I step through the object and that's where I get stuck. I'm not sure what to do after this. I'm new to JavaScript, so please take it easy. Thank you in advance!!!:)
HTML:
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="wrap">
<div id="board">
<h2>Tic Tac Toe</h2>
<div>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<div>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<div>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
</div>
<div id="gameOutput"></div>
</div>
</body>
</html>
JavaScript:
var players = ['X', 'O'];
var currentMove = 0;
var gameOver = false;
var output = document.querySelector('#gameOutput');
var buttonClicked = document.querySelectorAll('#board .btn');
output.innerText = "Game is ready. " + players[currentMove] + " Turn.";
// sets X or O
var setMove = function (move, mark) {
for (var i = 0; i < move.length; i++) {
move[i].innertText = mark;
}
};
//some code
var buttonClickHandler = function() {
//some more code
if (valid(buttonClicked) === true) {
this.style.backgroundColor = '#0D771A';
console.log(setMove(buttonClicked, players[currentMove]));
} else if (valid(button) === false) {
output.innerText = "That is not a valid move :(";
};
//some more code
});
for (var i = 0;i < buttonClicked.length; i++) {
buttonClicked[i].addEventListener('click', buttonClickHandler);
}
source to share
You have an extra parenthesis after the function definition buttonClickHandler
. Also, you are using a function valid
that is not defined. Please add it to the question if it is there, or define it yourself and try again.
var buttonClickHandler = function() {
//some more code
if (valid(buttonClicked) === true) {
this.style.backgroundColor = '#0D771A';
console.log(setMove(buttonClicked, players[currentMove]));
} else if (valid(button) === false) {
output.innerText = "That is not a valid move :(";
} // <<<<<<<<<<<<<<<<<< removing semi-colon
//some more code
}; // <<<<<<<<<<<<<<< removing extra bracket
source to share