2014-09-23 41 views
0

我創建一個小測驗,如果答案是正確的背景將是綠色的,如果是錯誤的將是紅色的變化取決於由答案的單選按鈕的背景

這裏是HTML

的代碼
<!DOCTYPE html> 
<html> 

<head> 
</head> 

<body> 


<form class="forma"> 



     <div class="pyetja"><h3>1. The flag if Italy which color has..</h3> 

    <div class="formafoto"><div class="foto"></div><div class="pergjigjet"><div class="pergjigje"> 
        <div class="pergjigjemajtas"> 
        white and blue 
        </div> 
        <div class="pergjigjedjathtas" id="0"> 
        <label><input type="radio" value="1" name="0" unchecked="">right</label> 
        <label><input type="radio" value="0" name="0" unchecked="">wrong</label> 
        </div> 
    </div> 
    <div class="pergjigje"> 
        <div class="pergjigjemajtas"> 
        white and red 
        </div> 
        <div class="pergjigjedjathtas" id="1"> 
        <label><input type="radio" value="1" name="1" unchecked="">right</label> 
        <label><input type="radio" value="0" name="1" unchecked="">wrong</label> 
        </div> 
    </div> 
    <div class="pergjigjeno"> 
        <div class="pergjigjemajtas"> 
        white red and green 
        </div> 
        <div class="pergjigjedjathtas" id="2"> 
        <label><input type="radio" value="1" name="2" unchecked="">right</label> 
        <label><input type="radio" value="0" name="2" unchecked="">wrong</label> 
        </div> 


    </div></div></div></div> 



    <div class="question"> 
<input id="buton" type="button" value="Finish!" onClick="getScore(this.form); getResult(this.form);"> 
<p> <strong class="bgclr">Result = </strong><strong><input class="bgclr1" type="text" size="2" name="percentage" disabled></strong><br><br> 
<div id="rezultati"></div> 
    </div> 

</form> 


</body> 
</html> 

和JavaScript

// Insert number of questions 
    var numQues = 3; 

    // Insert number of choices in each question 
    var numChoi = 2; 

    // Insert number of questions displayed in answer area 
    var answers = new Array(2); 

    // Insert answers to questions 

    answers[0] = 1; 
    answers[1] = 1; 
    answers[2] = 1; 


    // Do not change anything below here ... 
    function getScore(form) { 

     var score = 0; 
     var currElt; 
     var currSelection; 
     for (i=0; i<numQues; i++) { 
     currElt = i*numChoi; 
     for (j=0; j<numChoi; j++) { 
      currSelection = form.elements[currElt + j]; 
      if (currSelection.checked) { 
      if (currSelection.value == answers[i]) { 
       score++; 

      } 
     } 
     } 
     } 

      var radio1 = document.getElementByName("0").value; 

      if (answers[0] == radio1) { 

        document.getElementById("0").style.backgroundColor="#00FF00"; 

        } else { 

        document.getElementById("0").style.backgroundColor="#e83f3f"; 

        } 



       if(score > 3) { 
         document.getElementById("rezultati").innerHTML = "Congratulation!"; 
        } else { 
         document.getElementById("rezultati").innerHTML = "Try again!"; 
        } 


     form.percentage.value = score; 

     form.solutions.value = correctAnswers; 

    } 
    // End --> 
    </script> 

我總是得到紅色背景如果答案是正確的,也許document.getElementByName(「0」),價值沒有得到一個數,使成立的情況下

var radio1 = document.getElementByName("0").value; 

      if (answers[0] == radio1) { 

       document.getElementById("0").style.backgroundColor="#00FF00"; 

      } else { 

       document.getElementById("0").style.backgroundColor="#e83f3f"; 

      } 
+1

你的代碼有很多錯誤。當你得到一個ID爲「0」的元素時,它會返回一個div,它不會有任何值。你需要通過給他們一個id /名字來獲取單選按鈕,並檢查他們是否被選中。如果他們被檢查,你需要使用該值作爲用戶選擇的值。 – Sunand 2014-09-23 20:04:07

+0

即時通訊設法從名稱中獲得一個值 單選按鈕有名稱和值,哪裏需要id? – user3679032 2014-09-23 20:05:37

+0

我認爲函數名是getElementsByName,它會返回一個元素數組。 – Sunand 2014-09-23 20:06:46

回答

0
var radio1 = document.getElementByName("0").value; 

      if (answers[0] == radio1) { 

可能是你的錯誤是在這行代碼中,ID =「0」是一個div和你想獲得它的價值,這可能導致進入未定義的和值答案[ 0]是1,因此1不等於radio1,因此它總是進入else塊。

+0

其變量radio1 = document.getElementByName(「0」).value;並仍然不工作... – user3679032 2014-09-23 20:10:26

+0

我認爲document.getElementByName(「0」)。值不是獲得一個數字,而是一個字符串,它的一種方法來把它作爲數字? – user3679032 2014-09-23 20:13:41

+0

它的var radio1 = document.getElementsByName(「0」),它將給出一個名爲「0」的所有元素的數組,如[],我們可能需要檢查這些單選按鈕的值,這可能有助於'var radio1 = document.getElementsByName(」0「)[0] .value'# – 2014-09-23 20:14:59