Why can't it find the element - Error in the console "Cannot read property 'addEventListener' of null"?

  • 0
    There is an element on the page, the script is connected before the closing body tag. Tell me what the problem is.
    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);
    });

    JavaScript Anonymous, Nov 14, 2020

  • 1 Answers
  • 0
    id = " # play-again"

    id = " # exit-game"
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!