CODEWITHSUNDEEP
javascriptappendchild
Ninti Chance
Ninti Chance

Reputation: 23

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

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();

Upvotes: 0

Views: 3358

Answers (2)

E. Villiger
E. Villiger

Reputation: 916

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')

Upvotes: 0

sumeet kumar
sumeet kumar

Reputation: 2648

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>

Upvotes: 1

Related Questions