Javascript-使用函數來驗證div的內容是否與其他內容匹配？

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，輸出

謝謝。

Answer 1

您試圖找出的是一種將html元素連接起來的方法，該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代碼存在一些問題。

對於選擇框，您具有帶有answerCheck的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];

可以通過以下方法解決此問題：將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