如何从多个html表单元素中获取值?

时间:2015-02-18 19:49:23

标签: javascript html

我做了一个测试,我试图获得与每个答案相关的值,这样我就可以根据这些值给用户一个分数。现在,代码给了我双倍的答案。现在有7个问题,每次用户单击带有正确答案的单选按钮时,它应该值1分。最后,当我提交测试时,似乎所有的值都加倍了(当我只得到100%时得到200%)。任何帮助表示赞赏。

这是我的测试:

<ol>
<li>What are the three main areas of the Standard User Interface?
  <ul type="none">
    <li><input type="radio" name="q1" value="0"  />Header, Banner, Frame, Application Window</li>
    <li><input type="radio" name="q1" value="0"  /> Content Frame, Homepage, Form </li>
    <li><input type="radio" name="q1" value="1" onchange="checkAnswer()"/> Application Navigator, Banner Frame, Content Frame </li>
    <li><input type="radio" name="q1" value="0"  /> Larry, Moe, and Curly</li>
  </ul>
 </li>

<li>In the User interface, what is the gray toolbar called which allows you to add bookmarks?

  <ul type="none">
    <li><input type="radio" name="q2" value="0" /> Gauge</li>
    <li><input type="radio" name="q2" value="1" onchange="checkAnswer()"/> Edge</li>
    <li><input type="radio" name="q2" value="0" /> Remedy</li>
    <li><input type="radio" name="q2" value="0" /> Banner</li>
  </ul>
</li>

<li>What can be captured in an update set?

   <ul type="none">
     <li><input type="radio" name="q3" value="0" /> Modified CI Rules</li>
     <li><input type="radio" name="q3" value="1" onchange="checkAnswer()"/> Business Rules</li>
    <li><input type="radio" name="q3" value="0" /> Scheduled Jobs</li>
    <li><input type="radio" name="q3" value="0" /> None of these</li>
  </ul>
</li>

 <li>What should you always do before you commit an update set?

   <ul type="none">
     <li><input type="radio" name="q4" value="1" onchange="checkAnswer()" /> Preview</li>
    <li><input type="radio" name="q4" value="0"  /> Merge</li>
    <li><input type="radio" name="q4" value="0"  /> Ignore</li>
    <li><input type="radio" name="q4" value="0"  /> All of these</li>
   </ul>
 </li>

 <li>Which of the following is a Business Rule best pratice?

   <ul type="none">
    <li><input type="radio" name="q5" value="1" onchange="checkAnswer()" /> Make business rules small and specific</li>

     <li><input type="radio" name="q5" value="0"  /> Use of conditions is not necessary</li>
<li><input type="radio" name="q5" value="0"  /> Global business rules should be used</li>

    <li><input type="radio" name="q5" value="0"  /> None of these</li>
  </ul>
 </li>

 <li>Which of the following is a Client Script best practice?

   <ul type="none">
    <li><input type="radio" name="q6" value="0"  /> Use hard coded data</li>
 <li><input type="radio" name="q6" value="0"  /> Maximize server lookup</li>
 <li><input type="radio" name="q6" value="1" onchange="checkAnswer()" /> Do not use g_form.getReference()</li>
<li><input type="radio" name="q6" value="0"  /> All of these</li>
  </ul>
</li>

<li>Which of the following are debugging features?

 <ul type="none">
 <li><input type="radio" name="q7" value="0"  /> Debug Business Rule</li>
     <li><input type="radio" name="q7" value="0"  /> Javascript</li
     <li><input type="radio" name="q7" value="1" onchange="checkAnswer()" /> Debug Business Rule and Javascript</li>
     <li><input type="radio" name="q7" value="0"  /> There is none</li>

      </ul>
</li>


</ol>




<button onclick="finishTest()"> Submit Test  </button>

这是我的javascript:

var question=document.getElementsByTagName("input");
var grade;
var score = 0;
var totalQuestions = 7;
function checkAnswer(){
    for(var questionNum = 0; questionNum<totalQuestions; questionNum++){
        var answer = question[questionNum].value;
        if(answer=="1"){
            score+=1;

        }else{
            score+=0;
        }

        grade = "%" + (score/totalQuestions)*100;
    }
}
function finishTest(){

    alert(" You scored a " +grade);

}

1 个答案:

答案 0 :(得分:1)

我使用了这个功能

function finishTest()
{
var score = 0;
var maxQues = 7;
for(var questionNum = 1; questionNum<=maxQues; questionNum++){
var radios = document.getElementsByName('q'+questionNum);
for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked && radios[i].value=="1") score++; 

}
}
    score = parseFloat(score*100/maxQues).toFixed(1);
    alert("You scored "+score+"%");
}    

工作Fiddle