javascript - 测验 - 计算单选按钮值

Question

我正在尝试为西类牙语类(class)创建测验。我对 JavaScript 经验不多，但对 html 和 CSS 相当精通。我有一个问题，然后是三个带答案的单选按钮。有两个错误答案和一个正确答案。我总共有 45 个问题。

<form name="quiz" method="post" name="buttons" id="form" onsubmit="return totalVal()">

<li><div class="question">¿Quién detestan la nueva casa?</div></li>
<input id="answer" type="radio" name="group1" value="wrong"> Josh<br>
<input id="answer" type="radio" name="group1" value="wrong"> Amanda<br>
<input id="answer" type="radio" name="group1" value="correct"> Josh y Amanda<hr>

<li><div class="question">¿Quién es señor Dawes?</div></li>
<input id="answer" type="radio" name="group2" value="wrong">Un familia amigo<br>
<input id="answer" type="radio" name="group2" value="wrong">Un gato<br>
<input id="answer" type="radio" name="group2" value="correct">Un amable joven de la agencia de bienes raíces<hr>

<li><div class="question">¿Quién qué sus buscan?</div></li>
<input id="answer" type="radio" name="group3" value="wrong">Josh<br>
<input id="answer" type="radio" name="group3" value="wrong"> Petey<br>
<input id="answer" type="radio" name="group3" value="correct" >Josh y Petey<hr>

<button class="submit" onclick="showTotalvalue();" type="submit">Submit</button></div>

我想使用一些基本的 Javascript 来计算所有“正确”的单选按钮值，并输出到一个新页面或用户点击提交后显示的警告框。

我在研究中发现了这一点。在我的谷歌搜索中，我无法找到计算“正确”值的代码片段。上面的链接是我得到的最接近的链接。我附上了我根据其他帖子的建议更改以适应我的情况的 JavaScript。

totalVal = 0;

// calculate the total number of corrects clicked

for (y = 0; y = incorrectOfQuestion; y++) {
    var questionNo = document.getElementsByName("questions" + y);
    for (i = 0; i < questionNo.length; i++) {
        if (document.myform.questions[i].checked == true) {
            totalVal = totalVal + parseInt(document.myform.questions[i].value, 45);
        }
    }
}

非常感谢任何帮助，因为我正处于时间紧迫的状态!谢谢!

Answer 1

这应该是让它与警告框一起工作所需的代码:

        function handleClick()
          {         
        var amountCorrect = 0;          
        for(var i = 1; i <= 45; i++) {
          var radios = document.getElementsByName('group'+i);
          for(var j = 0; j < radios.length; j++) {
            var radio = radios[j];
            if(radio.value == "correct" && radio.checked) {
              amountCorrect++;
            }
          }
         }                   
            alert("Correct Responses: " + amountCorrect);
          }

        <form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">

        <li><div class="question">¿Quién detestan la nueva casa?</div></li>
        <input id="answer" type="radio" name="group1" value="wrong"> Josh<br>
        <input id="answer" type="radio" name="group1" value="wrong"> Amanda<br>
        <input id="answer" type="radio" name="group1" value="correct"> Josh y Amanda<hr>

        <li><div class="question">¿Quién es señor Dawes?</div></li>
        <input id="answer" type="radio" name="group2" value="wrong">Un familia amigo<br>
        <input id="answer" type="radio" name="group2" value="wrong">Un gato<br>
        <input id="answer" type="radio" name="group2" value="correct">Un amable joven de la agencia de bienes raíces<hr>

        <li><div class="question">¿Quién qué sus buscan?</div></li>
        <input id="answer" type="radio" name="group3" value="wrong">Josh<br>
        <input id="answer" type="radio" name="group3" value="wrong"> Petey<br>
        <input id="answer" type="radio" name="group3" value="correct" >Josh y Petey<hr>

        <button class="submit" onclick="return handleClick();" type="submit">Submit</button>
        
        </form>

@pimvdb 在检查不允许类型转换的“正确”字符串时使用了 === 运算符，因此失败了。他还使用了 getElementsByClassName 但是元素没有应用类，所以这是不正确的。

可以在下面的 fiddle 中找到工作版本。如您所见，表单的 onsubmit 已设置为“return false”以停止发布表单。

http://jsfiddle.net/g45nG/1/