javascript - 选择字段中要显示在另一个文本字段中的值的总和 (javascript)

Question

我目前正在开发一个表单，需要对选择字段的值(整数值)进行求和，并且结果应显示在另一个输入字段中。布局是计分表的布局，有多行，显示部分总计和总计，并且分数的总和必须分阶段(或行)完成。因此，单行的所有分数将仅包含该行的部分总分。

我遇到的问题是，不太擅长 javascript，是我发现一个脚本在某种程度上可以工作，但是将所有行的结果添加到第一行的部分总计字段中(请参见下图)。

图片链接:http://postimg.org/image/77fxwl2db/

该表单的正确工作方式是，在单行中的选择字段中选择的分数将在同一行的浅灰色字段中显示部分总计，并且仅在该字段中显示，而深灰色(黑色)字段将显示前一部分总和加上该行的总和。 (请参见下图)

图片链接:http://postimg.org/image/ddolwjfft/

希望这是有意义的......至于代码，这就是我正在使用的:

<form method="post" action="#" >
    <fieldset class="scores_row_1">
    <select class="input1" onchange="OnChange(this.value)" name="score_1">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_2">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_3">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_4">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_5">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>
    <select class="input1" onchange="OnChange(this.value)" name="score_6">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0">M</option>
    </select>


    <span class="spacer"></span>
    <input type="text" maxlength="2" class="input2" id="total_row_1" />
    <input type="text" maxlength="2" class="input3" />
</fieldset>
</form>

上面的代码代表一行，但需要多行。至于使用的javascript，代码如下:

<script type="text/javascript" language="javascript">
var row = 1;
var sum = 0;

function OnChange(value) {
    sum += new Number(value);
    document.getElementById('total_row_'+ row).value = sum;
}

请对此提供任何帮助，我们将不胜感激。我已经寻找了一些选项，但找不到任何符合此特定情况的选项!

Answer 1

我已经为您开发了一个解决方案，将您的问题扩展到两行。对您的原始源代码进行了各种更改，其中存在许多错误。添加了评论，希望使解决方案不言自明。

每列各自的总计显示在选择字段旁边，每行的总总计显示在下面的输入字段中，

Javascript:-

function OnChange(node) {
var row=1; 
var sum = 0;

    if(node.parentNode.className=="scores_row_1"){row=1;} //Row selector
    if(node.parentNode.className=="scores_row_2"){row=2;}

    var value=node.value;
    if(value=="X"){
    value=10;  //dont know what you intend to do with X value, for me i have set it as 10,make your changes in the if condition accordingly
    }
    if(value=="M"){
    value=0; //for option M
    }
    //made changes to previous source, now added loop to loop through the select elements, note that you have to assign a default value to the select tags like M 
    for(var i=1;i<7;i++)
    { //sum is total of select elements, get each by their unique name attribute
sum+=parseInt(document.getElementsByName("score_"+row+"_"+i)[0].value);
}

    document.getElementById('total_row_'+ row).value = sum; //assign sum to the input element


}

function OnChangeFinal() {   
    //function keeps calling on mousemove and sums total of both rows input fields and assignto the final input field. You can change the event type i just used this for demo
    document.getElementById('final_row').value= parseInt(document.getElementById('total_row_1').value) + parseInt(document.getElementById('total_row_2').value);
    }

HTML:-

   <form method="post" action="#" onmousemove="OnChangeFinal()"> <!--assigned event to the form to call OnChangeFinal()--> 
    <fieldset class="scores_row_1">
    <select class="input1" onchange="OnChange(this)" name="score_1_1">//assign names as score_rowNumber_scoreNumber to uniquely identify each element.
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_2">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_3">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_4">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_5">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_1_6">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>


    <span class="spacer"></span>
        <input type="text" maxlength="2" class="input2" value="0" id="total_row_1" /><!--assigned default value 0 and id-->

</fieldset>
     <fieldset class="scores_row_2">
    <select class="input1" onchange="OnChange(this)" name="score_2_1">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_2">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_3">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_4">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_5">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>
    <select class="input1" onchange="OnChange(this)" name="score_2_6">
        <option value=""></option>
        <option value="X">X</option>
        <option value="9">9</option>
        <option value="7">7</option>
        <option value="5">5</option>
        <option value="3">3</option>
        <option value="1">1</option>
        <option value="0" selected="selected">M</option>
    </select>


    <span class="spacer"></span>
    <input type="text" maxlength="2" class="input2" value="0" id="total_row_2" /><!--assigned default value 0 and id-->
         <input type="text" maxlength="2" class="input3" value="0" id="final_row"/><!--The grand total appears here-->
</fieldset>

</form>

fiddle :- http://jsfiddle.net/TRV4f/3/

编辑 1:- 在源代码中添加注释

编辑 2:- 正如用户所指出的，对先前的源进行了更改，该源存在错误。