Question

JavaScript：未捕获的类型错误：无法读取 null 的属性“appendChild”

2017-11-13

3343

javascript appendchild

我是新手，目前正在开发一款记忆卡游戏。请帮帮我。

以下是出现错误消息的代码：

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>

Answer 2

错误“无法读取 null 的属性‘appendChild’”意味着您使用 appendChild 的行计算结果为

null.appendChild(cardElement);

换句话说， document.querySelector('game-board') 必须计算结果为 null，而 null 没有 appendChild 方法。

解决方案： querySelector 中的选择器可能是错误的；请查看文档。

如果 game-board 是一个类，则应该是

document.querySelector('.game-board')

如果 game-board 是一个 id，则应该是

document.querySelector('#game-board')