How to handle HTML Radio Buttons with Javascript?

Question

<html>
<head>
<title> Algebra Reviewer </title>
<style type="text/css">
h2
{
color: white;
font-family: verdana;
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
}
table
{
font-family:verdana;
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>
<script type="text/javascript">
function question1()
{
if ("quiz.question1.value=='d'")
{
alert ("That's the correct answer!");
} 
else
{
alert ("Oops! try again!");
}
}
</script>
</head>
<body>
</br>
<h2>
Here are 10 items for you to answer. You might need scratch paper- so get one before taking this reviewer.
</h2>
</br>
</br>
<center>
<table border="0" bgcolor="tan">
<tr> <td>
<ol>
<li> What is the equation of the line passing through point (3,8) and parallel to the line x - 3y = 5 ? </li>
</br>
</br> 
<input type = "radio" name = "question1" onclick = "quiz.question1.value=='a'"/> y = 1/3 x + 5
</br>
<input type = "radio" name = "question1" onclick = "quiz.question1.value=='b'"/> y = 3x + 7
</br>
<input type = "radio" name = "question1" onclick = "quiz.question1.value=='c'"/> y = 3/5 x + 3
</br>
<input type = "radio" name = "question1" onclick = "quiz.question1.value=='d'"/> y = 1/3 x + 7
</br>
</br>
<input type = "button" onclick = "question1()" name = "question1" value = "Submit"/>
<br/>
<br/>
</td> </tr> </table> </center>
</body>
</html

The answer here should be the 4th radio button, but I think that the if / else statement is wrong.

Totally unrelated, but I think the server should validate the correct answer instead of javascript. If you don't do that your students will easily cheat looking in the source html code for the answer. — Tomás
– Tomás, Commented Mar 19, 2014 at 12:46

T J · Accepted Answer · 2014-03-19 12:34:39Z

2

First of all, set the radios value attribute as the options. modify the following in your html

<input type = "radio" name = "question1" value='a'/> y = 1/3 x + 5
</br>
<input type = "radio" name = "question1" value='b'/> y = 3x + 7
</br>
<input type = "radio" name = "question1" value='c'/> y = 3/5 x + 3
</br>
<input type = "radio" name = "question1" value='d'/> y = 1/3 x + 7

and change the function as follows:

function question1()
{
  var selectedAns;
  var questions = document.getElementsByName("question1");
  for(var i = 0; i < questions.length; i++) {
     if(questions[i].checked == true) {
     selectedAns = questions[i].value;
     break;
  }

  if(selectedAns== 'd')
    alert ("That's the correct answer!");
  } 
  else
  {
   alert ("Oops! try again!");
  }
}

answered Mar 19, 2014 at 12:34

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tomás · Accepted Answer · 2014-03-19 12:57:07Z

1

You never defined the quiz variable. Use value attribute to get selected radio button. Use the following code.

<html>
<head>
<title> Algebra Reviewer </title>
<style type="text/css">
h2 {
   color: white;
   font-family: verdana;
   text-shadow: black 0.1em 0.1em 0.2em;
   text-align: center;
}
table {
   font-family:verdana;
   color: white;
   text-shadow: black 0.1em 0.1em 0.2em;
}
</style>
<script type="text/javascript">
    function question1() {
       var option = document.querySelector('input[name = "question1"]:checked').value;
       if (option == 'd') {
          alert("That's the correct answer!");
       } 
       else {
          alert ("Oops! try again!");
       }
    }
</script>
</head>
<body>
</br>
<h2>
Here are 10 items for you to answer. You might need scratch paper- so get one before taking this reviewer.
</h2>
</br>
</br>
<center>
<table border="0" bgcolor="tan">
   <tr> 
     <td>
        <ol>
           <li> What is the equation of the line passing through point (3,8) and parallel to the line x - 3y = 5 ? </li>
           </br>
           </br> 
           <input type = "radio" name = "question1" value="a" /> y = 1/3 x + 5
           </br>
           <input type = "radio" name = "question1" value="b" /> y = 3x + 7
           </br>
           <input type = "radio" name = "question1" value="c" /> y = 3/5 x + 3
           </br>
           <input type = "radio" name = "question1" value="d" /> y = 1/3 x + 7
           </br>
           </br>
           <input type = "button" onclick = "question1()" name = "question1" value = "Submit"/>
           <br/>
           <br/>
        </td>
     </tr>
 </table>
</center>
</body>
</html>

edited Mar 19, 2014 at 12:57

Tomás

3,6063 gold badges24 silver badges39 bronze badges

answered Mar 19, 2014 at 12:36

Yasitha

2,3034 gold badges25 silver badges39 bronze badges

1 Comment

Tomás Over a year ago

+1 for this clean solution. But beware. this does not work in IE7 caniuse.com/queryselector (though, IE7 is used in <1% worldwide theie7countdown.com/educate-others)

Quentin · Accepted Answer · 2014-03-19 12:24:38Z

0

You never define quiz so when you attempt to assign a value to quiz.question1.value, the code throws an error
Your if statement is testing to see if a string is a true value, which it always will be. You have too many quotes.

answered Mar 19, 2014 at 12:24

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Rishabh Shah · Accepted Answer · 2014-03-19 12:27:09Z

0

The name attribute for radio buttons and the submit button should not be same I guess. Try changing name attribute of submit button.

answered Mar 19, 2014 at 12:27

Rishabh Shah

6877 silver badges20 bronze badges

Comments

mahatmanich · Accepted Answer · 2014-03-19 12:33:15Z

0

For a first thing, you are missing a form element

< form name="quiz" > ... < /form >

This needs to be present for your JavaScript code to work.

name attributes for radio buttons and the submit button need to be different.

edited Mar 19, 2014 at 12:33

answered Mar 19, 2014 at 12:26

mahatmanich

11k5 gold badges69 silver badges88 bronze badges

Comments

Sam · Accepted Answer · 2014-03-19 12:52:53Z

Ok, I fixed your issue by using a hidden field. Good effort for a beginner. But, this is not the best way to do it. Anyway, keep up the good work. You'll get there.

<html>
    <head>
    <title> Algebra Reviewer </title>
    <style type="text/css">
    h2
    {
    color: white;
    font-family: verdana;
    text-shadow: black 0.1em 0.1em 0.2em;
    text-align: center;
    }
    table
    {
    font-family:verdana;
    color: white;
    text-shadow: black 0.1em 0.1em 0.2em;
    }
    </style>
    <script type="text/javascript">

    function question1()
    {
    if (document.getElementById('question1Answer').value =='d')
    {
    alert ("That's the correct answer!");
    } 
    else
    {
    alert ("Oops! try again!");
    document.getElementById('question1Answer').value =''
    }
    }
    </script>
    </head>
    <body>
    </br>
    <h2>
    Here are 10 items for you to answer. You might need scratch paper- so get one before taking this reviewer.
    </h2>
    </br>
    </br>
    <center>
    <table border="0" bgcolor="tan">
    <tr> <td>
    <ol>
    <li> What is the equation of the line passing through point (3,8) and parallel to the line x - 3y = 5 ? </li>
    </br>
    </br> 
    <input type = "radio" name = "question1" onclick = "document.getElementById('question1Answer').value ='a'"/> y = 1/3 x + 5
    </br>
    <input type = "radio" name = "question1" onclick = "document.getElementById('question1Answer').value ='b'"/> y = 3x + 7
    </br>
    <input type = "radio" name = "question1" onclick = "document.getElementById('question1Answer').value ='c'"/> y = 3/5 x + 3
    </br>
    <input type = "radio" name = "question1" onclick = "document.getElementById('question1Answer').value ='d'"/> y = 1/3 x + 7
    </br>
    </br>
    <input type = "hidden" id = "question1Answer" value = ""/>
    <input type = "button" onclick = "question1()" name = "question1" value = "Submit"/>
    <br/>
    <br/>
    </td> </tr> </table> </center>
    </body>
    </html>

Collectives™ on Stack Overflow

How to handle HTML Radio Buttons with Javascript?

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related