为什么即使按下了正确的单选按钮，我的计数器也始终为零？

Question

在我的 Java 脚本代码中，我在选中正确的单选按钮时增加了计数器，但是当我在控制台中签入时，在选中正确的单选按钮后计数器没有更新。即使在我单击调用显示计数器的函数 clicked() 的提交按钮之后。计数器仍然为零。有没有不更新的原因。这是我的 Java 脚本代码：

var counter = 0;

if (document.getElementById('blue').checked) {
  counter++;
}

if (document.getElementById('age3').checked) {
  counter++;
}

if (document.getElementById('hobby2').checked) {
  counter++;
}

if (document.getElementById('game3').checked) {
  counter++;
}

if (document.getElementById('language4').checked) {
  counter++;
}

function clicked() {
  document.getElementById("result").innerHTML = "You got " + counter;
}

<h1>Quiz</h1>

<form>
  <p>(1) What is my favourite Color?</p>
  <input type="radio" id="blue" name="color" value="blue">
  <label for="blue">blue</label><br>
  <input type="radio" id="red" name="color" value="red">
  <label for="red">red</label><br>
  <input type="radio" id="green" name="color" value="green">
  <label for="green">green</label><br>
  <input type="radio" id="purple" name="color" value="purple">
  <label for="purple">purple</label>

  <br>

  <p>(2) How Old am I?</p>
  <input type="radio" id="age1" name="age" value="20">
  <label for="age1">20</label><br>
  <input type="radio" id="age2" name="age" value="22">
  <label for="age2">22</label><br>
  <input type="radio" id="age3" name="age" value="21">
  <label for="age3">21</label><br>
  <input type="radio" id="age4" name="age" value="23">
  <label for="age4">23</label>

  <br>

  <p>(3) Which of the following is not of a hobby of mine?</p>
  <input type="radio" id="hobby1" name="hobby" value="swimming">
  <label for="hobby1">swimming</label><br>
  <input type="radio" id="hobby2" name="hobby" value="soccer">
  <label for="hobby2">soccer</label><br>
  <input type="radio" id="hobby3" name="hobby" value="chess">
  <label for="hobby3">chess</label><br>
  <input type="radio" id="hobby4" name="hobby" value="coding">
  <label for="hobby4">coding</label>

  <br>

  <p>(4) Which of the following is a game that I like?</p>
  <input type="radio" id="game1" name="game" value="NBA">
  <label for="game1">NBA</label><br>
  <input type="radio" id="game2" name="game" value="FortNite">
  <label for="game2">FortNite</label><br>
  <input type="radio" id="game3" name="game" value="God of War">
  <label for="game3">God of War</label><br>
  <input type="radio" id="game4" name="game" value="Call of Duty">
  <label for="game4">Call of Duty</label>

  <p>(5) At what is my favourite language</p>
  <input type="radio" id="language1" name="language" value="python">
  <label for="language1">python</label><br>
  <input type="radio" id="language2" name="language" value="Javascript">
  <label for="language2">Javascript</label><br>
  <input type="radio" id="language3" name="language" value="C++">
  <label for="language3">C++</label><br>
  <input type="radio" id="language4" name="language" value="Java">
  <label for="language4">Java</label><br><br>



</form>

<button onclick="clicked()">Submit</button>

<p id="result"> </p>

Answer 1

将所有这些单选按钮检查放入一个函数中，并在您点击提交时调用该函数。这应该可以解决您的问题。

var counter = 0;
function updateCounter(){

if (document.getElementById('blue').checked) {
  counter++;
}

if (document.getElementById('age3').checked) {
  counter++;
}

if (document.getElementById('hobby2').checked) {
  counter++;
}

if (document.getElementById('game3').checked) {
  counter++;
}

if (document.getElementById('language4').checked) {
  counter++;
}
}

function clicked() {
  updateCounter()
  document.getElementById("result").innerHTML = "You got " + counter;
  //reset the counter back to zero after displaying score
  counter = 0
}

<h1>Quiz</h1>

<form>
  <p>(1) What is my favourite Color?</p>
  <input type="radio" id="blue" name="color" value="blue">
  <label for="blue">blue</label><br>
  <input type="radio" id="red" name="color" value="red">
  <label for="red">red</label><br>
  <input type="radio" id="green" name="color" value="green">
  <label for="green">green</label><br>
  <input type="radio" id="purple" name="color" value="purple">
  <label for="purple">purple</label>

  <br>

  <p>(2) How Old am I?</p>
  <input type="radio" id="age1" name="age" value="20">
  <label for="age1">20</label><br>
  <input type="radio" id="age2" name="age" value="22">
  <label for="age2">22</label><br>
  <input type="radio" id="age3" name="age" value="21">
  <label for="age3">21</label><br>
  <input type="radio" id="age4" name="age" value="23">
  <label for="age4">23</label>

  <br>

  <p>(3) Which of the following is not of a hobby of mine?</p>
  <input type="radio" id="hobby1" name="hobby" value="swimming">
  <label for="hobby1">swimming</label><br>
  <input type="radio" id="hobby2" name="hobby" value="soccer">
  <label for="hobby2">soccer</label><br>
  <input type="radio" id="hobby3" name="hobby" value="chess">
  <label for="hobby3">chess</label><br>
  <input type="radio" id="hobby4" name="hobby" value="coding">
  <label for="hobby4">coding</label>

  <br>

  <p>(4) Which of the following is a game that I like?</p>
  <input type="radio" id="game1" name="game" value="NBA">
  <label for="game1">NBA</label><br>
  <input type="radio" id="game2" name="game" value="FortNite">
  <label for="game2">FortNite</label><br>
  <input type="radio" id="game3" name="game" value="God of War">
  <label for="game3">God of War</label><br>
  <input type="radio" id="game4" name="game" value="Call of Duty">
  <label for="game4">Call of Duty</label>

  <p>(5) At what is my favourite language</p>
  <input type="radio" id="language1" name="language" value="python">
  <label for="language1">python</label><br>
  <input type="radio" id="language2" name="language" value="Javascript">
  <label for="language2">Javascript</label><br>
  <input type="radio" id="language3" name="language" value="C++">
  <label for="language3">C++</label><br>
  <input type="radio" id="language4" name="language" value="Java">
  <label for="language4">Java</label><br><br>



</form>

<button onclick="clicked()">Submit</button>

<p id="result"> </p>

Answer 2

每次您获得的值都是 0，因为您编写的登录名不是通过单击单选按钮调用的。

第一件事就是将所有单选按钮定义为如下方法。

 function SelectValue () {
     counter = 0;
if (document.getElementById('blue').checked)
{
    counter++;
}


if (document.getElementById('age3').checked)
{
    counter++;
}

if (document.getElementById('hobby2').checked)
{
    counter++;
}

if (document.getElementById('game3').checked)
{
    counter++;
}

if (document.getElementById('language4').checked)
{
    counter++;
}

}

现在有两种调用方式。

在每个方法中都调用该方法，如下所示。

  <p>(1) What is my favourite Color?</p>
  <input type="radio" id="blue" name="color" value="blue" onclick="clickmethodthod()">
  <label for="blue">blue</label><br>

写一个点击逻辑并附加到所有单选按钮。

let counter = 0;


const radios = document.querySelector('input[type="radio"]');

for(radio in radios) {
    radios[radio].onclick = function() {
        SelectValue ()
    }
}

如果您遇到任何问题，请告诉我。

为什么即使按下了正确的单选按钮，我的计数器也始终为零？

Why is my counter always equal to zero even after the correct radio button is pressed?

html

javascript

radio-button