Qurel
@Qurel

Почему не находит элемент — Ошибка в консоли «Cannot read property 'addEventListener' of null»?

Элемент на странице есть, скрипт подключен перед закрывающим тегом body. Подскажите в чем проблема
GitHubPages

spoiler

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Tic Tac Toe</title>
</head>

<body>

	<div class="wrapper">
		<div id="game-menu-container">
			<div class="game-menu__background">
				<h2 class="game-menu__title">Press Enter to start the game</h2>
				<button id="on" class="game-menu__btn js-game-menu-btn">Start Game</button>
			</div>
		</div>

		<div class="result" id="result"></div>
		<div class="game" id="game">
			<div class="game__field js-game-field"></div>
			<div class="game__field js-game-field"></div>
			<div class="game__field js-game-field"></div>
			<div class="game__field js-game-field"></div>
			<div class="game__field js-game-field"></div>
			<div class="game__field js-game-field"></div>
			<div class="game__field js-game-field"></div>
			<div class="game__field js-game-field"></div>
			<div class="game__field js-game-field"></div>
		</div>
		<div class="game-menu__container">
			<button class="game-menu__btn scale" id="#play-again">Play Again</button>
			<button class="game-menu__btn scale" id="#exit-game">Exit Game</button>
		</div>
	</div>

	<script src="app.js"></script>
</body>

</html>

document.addEventListener('DOMContentLoaded', () => {
	let
		startGameBtn = document.querySelector('.js-game-menu-btn'),
		game = document.querySelector('#game'),
		result = document.querySelector('#result'),
		playAgain = document.querySelector('#play-again'),
		exitGame = document.querySelector('#exit-game'),
		fields = Array.from(document.querySelectorAll(".js-game-field")),
		count = 0,
		zero = `<svg class="zero"><circle r="45" cx="58" cy="58" stroke="red" stroke-width="10" fill="none" stroke-linecap="round"/></svg>`,
		cross = `<svg class="cross"><line class="cross__first" x1="15" y1="15" x2="100" y2="100" stroke="blue" stroke-width="10" fill="none" stroke-linecap="round"/><line class="cross__last" x1="100" y1="15" x2="15" y2="100" stroke="blue" stroke-width="10" fill="none" stroke-linecap="round"/></svg>`;

	function startGame() {
		let buttonId = startGameBtn.getAttribute('id');
		let gameMenuContainer = document.querySelector('#game-menu-container');

		gameMenuContainer.removeAttribute('class');
		gameMenuContainer.classList.add(buttonId);
		document.body.classList.remove('modal-active');
	}

	function exit() {
		let gameMenuContainer = document.querySelector('#game-menu-container');

		gameMenuContainer.classList.add('out');
		document.body.classList.remove('modal-active');
	}

	function AIPlay() {
		let emptyFields = fields.filter(el => el.innerHTML === '');
		let random_index = Math.floor(Math.random() * emptyFields.length);

		setTimeout(() => {
			if (count !== 9) {
				emptyFields[random_index].innerHTML = zero;
				emptyFields[random_index].classList.add('o');
				let zeroAudio = new Audio('audio/zero.mp3');
				zeroAudio.play();
				count++;
			}
		}, 1000)

	};

	function stepCross(target) {
		target.innerHTML = cross;
		target.classList.add('x');
		let crossAudio = new Audio('audio/cross.mp3');
		crossAudio.play();
		count++;
	}

	function win() {
		let comb = [
			[0, 1, 2],
			[3, 4, 5],
			[6, 7, 8],
			[0, 3, 6],
			[1, 4, 7],
			[2, 5, 8],
			[0, 4, 8],
			[2, 4, 6]
		];

		for (let i = 0; i < comb.length; i++) {
			setTimeout(() => {
				if (fields[comb[i][0]].classList.contains('x') && fields[comb[i][1]].classList.contains('x') && fields[comb[i][2]].classList.contains('x')) {
					fields[comb[i][0]].classList.add('active');
					fields[comb[i][1]].classList.add('active');
					fields[comb[i][2]].classList.add('active');
					result.innerText = 'You won';
					game.removeEventListener('click', init);
				}
				else if (fields[comb[i][0]].classList.contains('o') && fields[comb[i][1]].classList.contains('o') && fields[comb[i][2]].classList.contains('o')) {
					fields[comb[i][0]].classList.add('active');
					fields[comb[i][1]].classList.add('active');
					fields[comb[i][2]].classList.add('active');
					result.innerText = 'You lose';
					game.removeEventListener('click', init);
				}
				else if (count == 9) {
					result.innerText = 'Noone is winner';
					game.removeEventListener('click', init);
				}
			}, 5000);
		}
	}

	function init(e) {
		stepCross(e.target);
		AIPlay();
		win();
	}

	function newGame() {
		count = 0;
		result.innerText = '';
		fields.forEach(el => {
			el.innerHTML = '';
			el.classList.remove('x', 'o', 'active');
		});
		game.addEventListener('click', init);
	}

	document.body.addEventListener('keydown', (e) => {
		if (e.key == "Enter") {
			startGame();
		}
	});
	startGameBtn.addEventListener('click', startGame);
	game.addEventListener('click', init);
	playAgain.addEventListener('click', newGame);
	exitGame.addEventListener('click', exit);
});

  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
id="#play-again"
id="#exit-game"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы