Javascript - 使用函数来验证 div 的内容是否与其他内容匹配？

Question

我正在开发一个小型数学游戏来帮助我自学 JavaScript，但目前我一直在努力让一个函数正常工作。总体思路是，当玩家单击四个可能答案之一时，函数 checkAnswer() 将验证所选 div 的内容是否与正确答案匹配。但是因为有四个不同的 div，所以我找不到一种方法来验证这一点，除非我创建了四个单独的函数，每个函数对应每个 div 的每个按钮。即使这样，需要比较的“正确答案”也会生成并嵌套在另一个函数(generateQuestion)中，因为我的 friend 说，如果我将它与其他变量放在外面，它每次都会创建相同的问题。此检查功能使用什么代码？游戏的所有代码都在 JSbin 中，但这是我遇到问题的 Javascript:

function answerCheck(clicked_id) {
  if (clicked_id == document.getElementById("question").innerHTML) {
    document.getElementById("correct").style.display = "block";
  }

}

http://jsbin.com/nunusarofo/edit?html,css,js,output

谢谢。

Answer 1

我发现 jsBin 代码存在一些问题。

对于选择框，您可以使用带有 answerCheck 的 onclick 处理程序的按钮。游戏开始时，该按钮将替换为答案选项。带有点击处理程序的按钮消失了。

这些通过 onclick 删除按钮:

document.getElementById("box1").innerHTML = answerSelection[0];
document.getElementById("box2").innerHTML = answerSelection[1];
document.getElementById("box3").innerHTML = answerSelection[2];
document.getElementById("box4").innerHTML = answerSelection[3];

这可以通过在 dom 中将 onclick 上移一级并一起删除按钮来解决，因为游戏逻辑无论如何都会这样做:

<div id="box1" class="box"><button id="answer1" onclick="answerCheck(1)"></button></div>
<div id="box2" class="box"><button id="answer2" onclick="answerCheck(2)"></button></div>
<div id="box3" class="box"><button id="answer3" onclick="answerCheck(3)"></button></div>
<div id="box4" class="box"><button id="answer4" onclick="answerCheck(4)"></button></div>

至

<div id="box1" class="box" onclick="answerCheck(0)"></div>
<div id="box2" class="box" onclick="answerCheck(1)"></div>
<div id="box3" class="box" onclick="answerCheck(2)"></div>
<div id="box4" class="box" onclick="answerCheck(3)"></div>

我还会将 answerCheck 的索引更改为以 0 开头，这也将与代码中的逻辑匹配。

然后，为了验证正确答案，我会将正确答案的索引与点击的索引进行比较以及游戏是否正在运行:

function answerCheck(clicked_id) {
    if(isPlaying && clicked_id == correctIndex) {
        document.getElementById("correct").style.display = "block";
    }      
}

从那里......你应该能够继续你所进行的任何游戏逻辑!

在这里回答:http://jsbin.com/vojeyivobe/1/edit?html,js,console,output