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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

错误＆＃34;无法读取属性＆quot; appendChild＆＃39; of null＆＃34;表示您的appendChild行评估为

null.appendChild(cardElement);

换句话说，document.querySelector('game-board')必须评估为null，而null不具有appendChild方法。

解决方案：querySelector内的选择器可能是错误的;检查docs。

如果游戏板是一个类，它应该是

document.querySelector('.game-board')

如果游戏板是id，那么它应该是

document.querySelector('#game-board')

Answer 3

`

＆＃13;

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

＆＃13;

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

＆＃13;

<script>
createBoard();
</script>

＆＃13;

JavaScript：未捕获的TypeError：无法读取属性＆quot; appendChild＆＃39;为null

3 个答案: