如何在JavaScript中添加单选按钮的值?

问题描述 投票:0回答:4

我是一个非常业余的程序员,我想知道是否有一种方法可以将无线电按钮的值整齐而简单地加起来?我认为我的代码是非常自明的,但我一直收到一个零的返回值。

<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>
javascript dom
4个回答
1
投票
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);
}

我认为这比其他一些解决方案的代码效率更高一些。


1
投票

所有你的 if 测试的执行 加载时也就是在用户做出任何选择之前。你必须根据用户的交互来进行测试,即在 test.

出于教育目的,这里是你的代码的清理版本。避免代码的重复和重复。

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


0
投票

你需要把你的计算放在测试方法里面。

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

}
© www.soinside.com 2019 - 2024. All rights reserved.