CODEWITHSUNDEEP
javascripthtmlradio-button
user13576194
user13576194

Reputation:

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

In my Javascript code, I increment the counter when the right radio button is checked but when I check in the console, the counter doesn't get updated after the correct radio button is checked. Even after I click the submit button which calls a function clicked() that displays the counter. The counter still remains zero. Is there a reason why it doesn't get updated. Here is my Java Script code:

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>

Upvotes: 0

Views: 112

Answers (2)

Satya
Satya

Reputation: 53

Every time you are getting the value as 0 as the login you written is not calling on clicking of radio button.

First thing Just defined the all radio button into a method like below.

 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++;
}

}

Now there is two way you can call.

  1. Either call that method in each and every method like below.
  <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. Write a logic of click and attached to all radio button.
let counter = 0;


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

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

Let me know if you are getting any issue.

Upvotes: 0

tejas e
tejas e

Reputation: 74

Put all those radio button checkings into a function and call that function when you hit submit. This should solve your problem.

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>

Upvotes: 1

Related Questions