Question

使用简单的Tic Tac Toe游戏来改善我的JS，但我遇到了这个错误信息。我的“console.log（”message“）;”返回它应该显示的内容“游戏已准备好。玩家X转。”它是我的脚本标记的单个文件，位于</body>标记的最后。这很基础。任何帮助，将不胜感激。

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>

Answer 1

你需要通过id

获得你的元素

document.querySelector("#gameActionDisplay")

诀窍

干杯

未捕获的TypeError：无法设置null的属性'innerText' - 可能的语法错误

1 个答案: