Question

我非常喜欢业余程序员，我想知道是否有办法整齐地简单地添加单选按钮的值？我认为我的代码非常自我解释，但我一直收到零返回值。

<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

所有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

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

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

Answer 3

您需要将计算放在测试方法中：

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

}

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

3 个答案: