How to add values of radio buttons in JavaScript?

Question

I'm very much an amateur programmer, and I was wondering if there is a way to neatly and simply add up the values of radio buttons? I thought that my code was pretty self-explanitory, but I keep receiving a return value of zero.

<script>

var x1;
x1 = 0
var x2;
x2 = 0
var x3;
x3 = 0
var x4;
x4 = 0
var x5;
x5 = 0
var x6;
x6 = 0


//q1

if(document.getElementById("q1a").checked) 
{
x1 = 3
}
elseif(document.getElementById("q1b").checked)
{
x1 = 1
}
elseif(document.getElementById("q1c").checked)
{
x1 = 5
}

//q2

if(document.getElementById("q2a").checked)
{
x2 = 4
}
elseif(document.getElementById("q2b").checked)
{
x2 = 2
}

//q3

if(document.getElementById("q3a").checked)
{
x3 = 1
}
elseif(document.getElementById("q3b").checked)
{
x3 = 5
}
elseif(document.getElementById("q3c").checked)
{
x3 = 3
}

//q4

if(document.getElementById("q4a").checked)
{
x4 = 4
}
elseif(document.getElementById("q4b").checked)
{
x4 = 2
}

//q5

if(document.getElementById("q5a").checked)
{
x5 = 3
}
elseif(document.getElementById("q5b").checked)
{
x5 = 5
}
elseif(document.getElementById("q5c").checked)
{
x5 = 1
}

//q6

if(document.getElementById("q6a").checked)
{
x6 = 2
}
elseif(document.getElementById("q6b").checked)
{
x6 = 4
}

function test()
{
var score
score = (x1 + x2 + x3 + x4 + x5 +x6)
document.writeln("score is " + score);
}

</script>
<body>
<br>
        <br>
        <input type="radio" name="q1" id="q1a" value ="3"> <br>
        <input type="radio" name="q1" id="q1b" value ="1"> <br>
        <input type="radio" name="q1" id="q1c" value ="5"> <br>
        <br>

        <br>
        <input type="radio" name="q2" id="q2a" value="4"> <br>
        <input type="radio" name="q2" id="q2b" value="2"> <br>
        <br>

        <br>
            <input type="radio" name="q3" id="q3a" value="1"> <br>
            <input type="radio" name="q3" id="q3b" value="5"> <br>
            <input type="radio" name="q3" id="q3c" value="3"> <br>
        <br>

        <br>
         <input type="radio" name="q4" id="q4a" value="4"> <br>
         <input type="radio" name="q4" id="q4b" value="2"> <br>
        <br>

        <br>
        <input type="radio" name="q5" id="q5a" value="3"> <br>
        <input type="radio" name="q5" id="q5b" value="5"> <br>
        <input type="radio" name="q5" id="q5c" value="1"> <br>
        <br>

        <br>
        <input type="radio" name="q6" id="q6a" value="2"> <br>
        <input type="radio" name="q6" id="q6b" value="4"> <br>

<button onclick="test()"> Test </button>

Answer 1

All your if tests are executed on page load , ie before the user has made any selections. You have to make the tests in response to the user interaction, ie inside test .

For educational purposes, here is a cleaned up version of your code. Avoid code duplicate and repetition:

var n_questions = 6;

function test() {
    var score = 0;
    // The input elements have names q1 ... q6, so we iterate from 1 to 6
    for (var i = 1; i <= n_questions; i++) {
        // Get all input elements with name qX (i.e. q1, q2, ...)
        var answers = document.getElementsByName('q' + i);
        // Iterate over the selected input elements. They are the answers
        // for one question
        for (var j = 0; j < answers.length; j++) {
            // If one of them is selected
            if (answers[j].checked) {
                // add its value to the final score
                score += +answers[j].value;
                // and don't check the other answers of the question
                // (since only one can be selected)
                break;
            }
        }
    }
    alert(score);
}

DEMO

Answer 2

var score = 0;

function addScore(element, index, array) {
    if (element.checked) score += +element.value;
    return score;
}

function test() {
    var rdos = Array.prototype.slice.call(document.getElementsByTagName('input'));
    rdos.forEach(addScore);
    alert(score);
}

I think this is a tad more code-efficient than some other solutions.

Answer 3

You need to put your calculations inside the test method:

function test() {

   var score = 0;
   score += document.getElementById("q1a").checked ? +document.getElementById("q1a").value : 0;
   score += document.getElementById("q1b").checked ? +document.getElementById("q1b").value : 0;
   score += document.getElementById("q1c").checked ? +document.getElementById("q1c").value : 0;
   score += document.getElementById("q2a").checked ? +document.getElementById("q2a").value : 0;
   score += document.getElementById("q2b").checked ? +document.getElementById("q2b").value : 0;
   score += document.getElementById("q3a").checked ? +document.getElementById("q3a").value : 0;
   score += document.getElementById("q3b").checked ? +document.getElementById("q3b").value : 0;
   score += document.getElementById("q3c").checked ? +document.getElementById("q3c").value : 0;
   score += document.getElementById("q4a").checked ? +document.getElementById("q4a").value : 0;
   score += document.getElementById("q4b").checked ? +document.getElementById("q4b").value : 0;
   score += document.getElementById("q5a").checked ? +document.getElementById("q5a").value : 0;
   score += document.getElementById("q5b").checked ? +document.getElementById("q5b").value : 0;
   score += document.getElementById("q5c").checked ? +document.getElementById("q5c").value : 0;
   score += document.getElementById("q6a").checked ? +document.getElementById("q6a").value : 0;
   score += document.getElementById("q6b").checked ? +document.getElementById("q6b").value : 0;

   document.writeln("score is " + score);

}

How to add values of radio buttons in JavaScript?

Question

3 answers

solution1
1 2013-12-02 05:12:28

solution2
1 ACCPTED 2013-12-02 05:32:14

solution3
0 2013-12-02 04:58:54

How to add values of radio buttons in JavaScript?

Question

3 answers

solution1 1 2013-12-02 05:12:28

solution2 1 ACCPTED 2013-12-02 05:32:14

solution3 0 2013-12-02 04:58:54

solution1
1 2013-12-02 05:12:28

solution2
1 ACCPTED 2013-12-02 05:32:14

solution3
0 2013-12-02 04:58:54