为什么我的计数器总是等于零，即使在正确的单选按钮被按下后？

问题描述 投票：0回答：1

在我的Javascript代码中，当选中正确的单选按钮时，我增加了计数器，但当我在控制台中检查时，在选中正确的单选按钮后，计数器没有得到更新。即使在我点击提交按钮，调用函数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>
javascript html radio-button
1个回答
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>
0
投票

每次你得到的值都是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++;
}

}

现在有两种方法可以调用。

  1. 要么在每个方法中调用该方法，就像下面一样。
  <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>
  1. 写一个点击的逻辑并附加到所有单选按钮。
let counter = 0;


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

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

如果你有任何问题，请告诉我。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.