CODEWITHSUNDEEP
javascripthtml
LANole
LANole

Reputation: 37

Uncaught TypeError: Cannot set property 'innerText' of null - possible syntax error

Working on a simple Tic Tac Toe game to better my JS but am stuck with this error msg. My "console.log("message");" returns what it should display " Game is ready. Player X turn." Its a single file with my script tags at the end just above my </body> tag. It's pretty basic. Any help would be appreciated. 

var Display = function(displayElement) {						// create 'class' to eliminate many 'innerText' usage 
	var display = displayElement;								// and makes it easy to port to say android
	function setText(message) {
		console.log(message);
		display.innerText = message;
	}

	return {setMessage: setText};
};

	function isValid(button) {									 //if text within then not valid; if 0 then valid; any 
		return button.innerText.length == 0;					 //characters then invalid
	}

	function checkForWinner(squares, players, currentTurn) {
		if (squares[0].innerText == players[currentTurn] &&
			squares[1].innerText == players[currentTurn] &&
			squares[2].innerText == players[currentTurn])
			return true;
		if (squares[3].innerText == players[currentTurn] &&
			squares[4].innerText == players[currentTurn] &&
			squares[5].innerText == players[currentTurn])
			return true;
		if (squares[6].innerText == players[currentTurn] &&
			squares[7].innerText == players[currentTurn] &&
			squares[8].innerText == players[currentTurn])
			return true;
		if (squares[0].innerText == players[currentTurn] &&
			squares[3].innerText == players[currentTurn] &&
			squares[6].innerText == players[currentTurn])
			return true;
		if (squares[1].innerText == players[currentTurn] &&
			squares[4].innerText == players[currentTurn] &&
			squares[7].innerText == players[currentTurn])
			return true;
		if (squares[2].innerText == players[currentTurn] &&
			squares[5].innerText == players[currentTurn] &&
			squares[8].innerText == players[currentTurn])
			return true;
		if (squares[0].innerText == players[currentTurn] &&
			squares[4].innerText == players[currentTurn] &&
			squares[8].innerText == players[currentTurn])
			return true;
		if (squares[2].innerText == players[currentTurn] &&
			squares[4].innerText == players[currentTurn] &&
			squares[6].innerText == players[currentTurn])
			return true;
	}

	function setMark(button, mark) {
		button.innerText = mark;
	}

	function main() {
		var squares = document.querySelectorAll("#game button"); // returns array of all the buttons
		var players = ["X", "O"];								 // text displayed in the button
		var currentTurn = 0; 									 // either will be 0 or 1
		var isGameOver = false;									 // boolean either T or F
		var display = new Display(document.querySelector("gameActionDisplay")); //reference to msg 					

		display.setMessage("Game is ready. Player " + players[currentTurn] + " turn.");

		for (var i = 0, len = squares.length; i<len; i++) {		 //for loop to iterate through squares; set local var len
			squares[i].addEventListener("click", function() {
				if (isGameOver)
					return;

				if(!isValid(this)) {
					display.setMessage("Invalid move bud!");
				} else {
					setMark(this, players[currentTurn]);

					isGameOver = checkForWinner(squares, players, currentTurn);

					//Game is over

					//Game is draw

					//Game is not over yet; play on
					currentTurn++;								 // mod remainder toggles between 1 and 0				
					currentTurn = currentTurn % 2;

					display.setMessage("Player " + players[currentTurn] + " move");

				}
			});
		}
	}

	main();
<body>
	<div id="game">
	  <div>
		<button></button>
		<button></button>
		<button></button>
	  </div>
	  <div>
		<button></button>
		<button></button>
		<button></button>
	  </div>
	  <div>
		<button></button>
		<button></button>
		<button></button>
	  </div>

	  <div id="gameActionDisplay"></div>


	</div>
  </body>

Upvotes: 0

Views: 3137

Answers (1)

NiCo C
NiCo C

Reputation: 31

you need you get your element by id 

document.querySelector("#gameActionDisplay")

do the trick

Cheers

Upvotes: 2

Related Questions