JavaScript:未捕获类型错误:无法读取 null 的属性 'appendChild'

Question

我是一名初学者，目前正在开发一款内存卡游戏。请帮助我。

这是我的代码，错误消息适用于:

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

如果不将元素附加到 DOM，则无法访问元素。因为您的代码正在创建 img 标记并尝试在附加它们之前访问它们。这是修改后的代码

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>