JavaScript: Uncaught TypeError: Cannot read property 'appendChild' of null

Question

I am a beginner and I am currently working on a memory card game. Help me, please.

Here is my code to which the error message applies:

HTML

<div id="game-board" class="board clearfix"></div>

Javascript

var createBoard = function() {
    for (var i = 0; i < cards.length; i++) {
        var cardElement = document.createElement('img');
        cardElement.setAttribute('src', "images/back.png");
        cardElement.setAttribute('data-id', i);
        document.getElementsByTagName('img')[0].addEventListener('click', flipCard);
        document.querySelector('game-board').appendChild(cardElement);
    }
}


createBoard();

Answer 1

You can't access elements without attaching them to DOM.. as your code you are creating img tag and trying to access them before appending them. Here is the modified code

document.getElementsByTagName('img')[0].addEventListener('click', flipCard);
document.querySelector('game-board').appendChild(cardElement);

 var createBoard = function() { for (var i = 0; i < 5; i++) { var cardElement = document.createElement('img'); cardElement.setAttribute('src', "images/back.png"); cardElement.setAttribute('data-id', i); document.querySelector('.game-board').appendChild(cardElement); document.getElementsByTagName('img')[0].addEventListener('click', cardElement); } } createBoard(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='game-board' class='game-board'></div> 

Answer 2

The error "cannot read property 'appendChild' of null" means that your line with appendChild evaluates to

null.appendChild(cardElement);

In other words, document.querySelector('game-board') must be evaluating to null and null doesn't have an appendChild method.

Solution: Probably the selector inside querySelector is wrong; check the docs .

If game-board is a class it should be

document.querySelector('.game-board')

If game-board is an id it should be

document.querySelector('#game-board')

Answer 3

`

 var createBoard = function() { for (var i = 0; i < cards.length; i++) { var cardElement = document.createElement('img'); cardElement.setAttribute('src', "images/back.png"); cardElement.setAttribute('data-id', i); document.getElementsByTagName('img')[0].addEventListener('click', flipCard); document.querySelector('game-board').appendChild(cardElement); } } 

 var createBoard = function() { for (var i = 0; i < cards.length; i++) { var cardElement = document.createElement('img'); cardElement.setAttribute('src', "images/back.png"); cardElement.setAttribute('data-id', i); document.getElementsByTagName('img')[0].addEventListener('click', flipCard); document.querySelector('game-board').appendChild(cardElement); } } 

 <script> createBoard(); </script>