javascript - 在 if 语句中用数组数据填充一个 div

Question

我有 5 个 div 标签，它们都具有相同的 id“answer”，这些 div 标签需要执行此脚本:document.getElementById("answer").innerHTML = answer;

触发时(已完成，但仅供引用):

var arrAnswers = ["specialword", "word1", "word2" "word3" "word4"];
socket.on('answer', function (answer) {
    console.log('answer: ' + answer);
        if ( $.inArray(answer, arrAnswers) > -1 ) {
            console.log('correct answer!');
        } else {
            console.log('incorrect answer :(');
        }
});

我的 HTML 中有这个:

<div class="answer"></div>
<div class="answer"></div>
<div class="answer"></div>
<div class="answer"></div>
<div class="answer"></div>

我需要这样做，以便如果答案正确，它会选择一个空 div 标签并用变量“answer”指定的答案填充它。

理论上，如果 innerhtml 为空，我可以执行 if 语句，但这也会返回其他结果。我还可以执行 if else 语句，以便它查询是否为空，如果是，则执行 .innerhtml 部分，然后中断。但这似乎太长了。

解决这个问题的最短逻辑方法是什么？

提前致谢

Answer 1

这里可以使用document.getElementsByClassName("answer")数组，使用Math.random() * lengthOfArray生成随机数，然后使用索引器访问元素并设置该元素的 innerHTML 。所以这看起来像这样:

var arrAnswers = ["specialword", "word1", "word2" "word3" "word4"];
var answers = document.getElementsByClassName("answer");
var index = Math.random() * answers.length;
socket.on('answer', function (answer) {
    console.log('answer: ' + answer);
        if ( $.inArray(answer, arrAnswers) > -1 ) {
            console.log('correct answer!');
            answers[index].innerHTML = answer; //set answer
        } else {
            console.log('incorrect answer :(');
        }
});