Javascript 测验：单选按钮分数验证答案

【问题标题】：Javascript quiz: radio button score validationJavascript 测验：单选按钮分数验证
【发布时间】：2014-03-31 12:57:33
【问题描述】：

我正在学习 javascript，对于课堂作业，我正在做一个简单的测验。在这里找到：http://redwood.colorado.edu/scho5922/dm2/projects/project1.html

我的问题是我无法正确验证单选按钮。这可以防止计算测验分数。当您单击输入时，它会循环问题，但选择正确答案不会增加分数。我已经通过在 if 语句后添加警报和显示“分数”变量的按钮来测试这一点。正确答案没有提示，分数按钮（当前版本没有）显示分数为 0。

JavaScript

<script>
    var beers =[
  ["New World Porter", "Avery"],
  ["Ellie's Brown Ale","Avery"] ,
  ["Out of Bounds Stout","Avery"] ,
  ["Hazed & Infused Dry Hopped Ale", "Boulder Beer"],
  ["Sweaty Betty Blonde Ale", "Boulder Beer"],
  ["Mojo IPA", "Boulder Beer"],
  ["Mama's Little Yellow Pils", "Oskar Blues"],
  ["Dale's Pale Ale", "Oskar Blues"],
  ["G'Knight Imperial Red Ale","Oskar Blues"],
  ["Old Chub Scotch Ale","Oskar Blues"]
  ] ;

var score = 0;
var questionNum = 0;
var turns = 0;

function enterF (beer){   

questionNum++;
turns++;
var question = "What brewery makes ";
document.getElementById("header").innerHTML= question + beers[questionNum][0];
var answer = document.getElementsByName("beerbut").value.checked;
if(answers[i].checked == beers[questionNum-1][1]){
score++;
alert(score);
}

}
</script>

HTML

<body onload="popup()">

<h1 id="header">What brewery makes New World Porter</h1> 

     <div class="buttons">
<form>
<label for="_avery"> Avery</label>
<input type="radio" name="beerbut" id="_avery" value="Avery">
<br><br>
<label for="_bb"> Boulder Beer</label>
<input type="radio" name="beerbut" id="_bb" value="Boulder Beer">
<br><br>
<label for="_oskar"> Oskar Blues</label>
<input type="radio" name="beerbut" id="_oskar" value="Oskar Blues">
<br><br>
<label for="lefthand"> Left Hand </label>
<input type="radio" name="beerbut" id="_lefthand" value="Left Hand">
<br><br>
<input type="button" name="enter" id="enterbut" value="enter" onClick="enterF()">

</form>
</div>

</body>
</html>

【问题讨论】：

警告和 if 语句引用不在您发布的代码中，这将有助于查看
您在按钮上调用 enterF() 时不带任何参数。有没有你忘记发布的脚本？
ok 参数已添加。下面发布的解决方案会增加分数计数器，但无论答案如何，它都会这样做。

标签： javascript html validation button radio

【解决方案1】：

您正试图同时从多个元素中获取一个值。这不是你的做法。

在 javascript 中更改它

var answer = document.getElementsByName("beerbut").value.checked;

对于这样的事情

var elements = document.getElementsByName("beerbut");
for(i = 0; i < elements.length; i++){
   if(elements[i].checked){
        alert(elements[i].value);
   }
}

【讨论】：

好的，现在可以正常工作了。我添加了分数按钮，因此您可以随时查看分数。感谢您的帮助！
其实经过进一步的测试，即使输入错误的答案，分数计数器也会增加。例如，单击左手 10 次将返回 100%，即使该答案没有问题。 OP中的链接已更新
这不是示例的想法。我向您展示了您必须按单个而不是按组来获取值，对不起，我应该说清楚