Reputation: 3

How to add values of radio buttons in JavaScript?

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>

Upvotes: 0

Answers (3)

DevlshOne

Reputation: 8457

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.

Upvotes: 1

nahog

Reputation: 149

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);

}

Upvotes: -1

Felix Kling

Reputation: 816282

All your if tests are executed on page load, i.e. before the user has made any selections. You have to make the tests in response to the user interaction, i.e. 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

Upvotes: 1

How to add values of radio buttons in JavaScript?

Answers (3)

Related Questions