Question

我收到此错误。我试图通过JS动态添加一些html标签。并且有一个ID名称正好是addEventListener所需要的。但是我不知道如何解决。.如果我将'#answer-' + i更改为.answers是可行的。但这不是解决方案，因为我可以单击任何按钮而无需获取被单击的ID。

Questions.prototype.displayQuestion = function() {
let answer = [];
questionDOM.innerHTML = this.question;
let correct = this.correct;
for(let i = 0; i < this.answer.length; i++){
    answer.push(
        `
        <div id="answer-${i}" class="answer">
            <h5>${this.answer[i]}</h6>
                <div class="check"></div>
        </div>
        ` 
    );

    document.querySelector('#answer-' + i).addEventListener('click', function() {
        if(i === correct) {
            document.querySelector('#answer-' + correct).classList.add('animate__animated', 'animate__heartBeat');
        } else if (i !== correct) {
            document.querySelector('#answer-1').classList.add('animate__animated','animate__headShake')
        }

    })






}
answerDOM.innerHTML = answer.join('');

}

index.html

<body>
<div class="container">
    <div class="question">
        <div class="questionbox animate__animated animate__bounce">
            <h2 id="question"></h2>
        </div>
    </div>
    <div class="answers"></div>
</div>
<script src="app.js"></script>

Answer 1

您要推送到答案数组，但实际上并未将节点添加到dom。在尝试通过id获取元素之前，您想做类似document.body.innerHTML + = answer [i]的操作。我还可以看到您的循环将不会执行，因为在循环中添加答案之前，答案的长度最初为零。您需要在循环之前添加答案或将循环条件更改为<= this.answer.length <---但这是无限循环

由于某些原因无法读取null的属性addEventListener

1 个答案: