Question

我正在开发一个小型数学游戏，以帮助我自学Javascript，而且我目前仍然坚持使用函数。一般的想法是，当玩家点击四个可能答案中的一个时，function checkAnswer()将验证所选div的内容是否与正确答案匹配。但是因为有四个不同的div，我找不到一种方法来验证这个，除非我创建了四个单独的函数，每个div的每个按钮一个。即便如此，需要比较的'正确答案'是生成并嵌套在另一个函数（generateQuestion）中，因为我的朋友说如果我把它放在外面和其他变量一起，它每次都会创建相同的问题。此检查功能使用了什么代码？游戏的所有代码都在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

您想要弄清楚的是一种连接html元素的方法，该元素代表对应于相同答案的一些内部数据的答案。

您拥有的方法是一个良好的开端，每个答案都会尝试使用唯一值来标识自己：

<div id="choices">
  <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>

但问题现在变成了如何使用该值来获取实际答案数据？

好吧，您已经跟踪了correctIndex，这样您就可以提取正确答案answerSelection[correctIndex]。为什么不，而不是任意传递1,2,3,4的答案，你传递他们的索引0,1,2,3：

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

并比较给定索引是否与correctIndex匹配：

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

Answer 2

我发现了jsBin代码的一些问题。

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

这些按钮使用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];

这可以通过将onclick向上移动到dom中的一个级别并将所有按钮全部移除来解决，因为游戏逻辑无论如何都会这样做：

<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

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

2 个答案: