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

Question

I'm working on a small maths game to help me self-learn Javascript and I'm currently stuck with getting a function to work. The general idea is that when the player clicks on one of the four possible answers, the function checkAnswer() will verify that the content of the selected div matches the correct answer. But because there are four different divs, I can't find a way to get it to verify this unless I created four separate functions, one for each button of each div. And even then, the 'correct answer' it needs to be compared to is generated and nested inside another function (generateQuestion) because my friend said if I place it outside with the other variables, it will create the same question each time. What code is used for this check feature? All of the code for the game is in the JSbin, but this is the Javascript that I'm having trouble with:

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

Thank you.

Answer 1

What you're trying to figure out is a way to connect an html element that represents an answer to some internal data corresponding to the same answer.

The approach you have is a good start, each answer tries to use a unique value to identify itself:

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

But the problem now becomes how to use that value to obtain the actual answer data?

Well, you're already keeping track of correctIndex that will allow you to extract the correct answer like so answerSelection[correctIndex] . Why not, instead of arbitrary passing 1,2,3,4 for the answers, you pass in their indexes 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>

and compare if the given index matches the correctIndex :

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

Answer 2

I found a few issues with the jsBin code.

For the choice boxes, you have buttons with the onclick handler for the answerCheck . When the game starts, the button is replaced with the answer options. The button with the click handler is gone.

These remove the buttons with 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];

This can be fixed by moving onclick up one level in the dom and removing the button all together since the game logic does that anyways:

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

to

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

I also would change the index for answerCheck to start with 0 which would also match the logic in your code.

Then, to verify the correct answer, I would compare the index of the correct answer to the clicked index as well as if the game is running:

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

From there...you should be able to continue whatever game logic you had going!

Answer here: http://jsbin.com/vojeyivobe/1/edit?html,js,console,output