Question

我正在创建一个迷你测验，如果答案是正确的，背景将为绿色，如果错误将是红色

这是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（＆＃34; 0＆＃34;）。值没有得到一个数字来使条件成真

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

            if (answers[0] == radio1) {

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

            } else {

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

             }

Answer 1

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

            if (answers[0] == radio1) {

可能你的错误出现在这行代码中，id =“0”是一个div，你试图得到它的值，这可能导致未定义，值answer [0]为1，因此1不等于radio1，因此它总是进入else块。

根据答案更改单选按钮的背景

1 个答案: