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

标签 javascript

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

我遇到的问题是，不太擅长 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;
}

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

最佳答案

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

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

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:- 正如用户所指出的，对先前的源进行了更改，该源存在错误。

关于javascript - 选择字段中要显示在另一个文本字段中的值的总和 (javascript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24239264/

上一篇：javascript - 对于node.js、express和handlebars，我应该将前端javascript放在哪里？

下一篇：javascript - Require.js 独立于其他网站

相关文章：

javascript - 从数据表中获取数据，然后使用ajax将其传递给php

javascript - 我可以在其他网站上重复使用 Google Analytics 的相同跟踪 ID

javascript - 如何更改导航栏当前页面的颜色

javascript - Phaser——如何检查 Sprite 是否在移动？

javascript - 有没有办法在准确的时间履行 promise ？

javascript - 用于验证国民保险号码的正则表达式

javascript - Javascript/垃圾收集器中的循环引用

javascript - 如何从 jquery 加载函数中检索 url 参数？

javascript - Material UI 多选中的可删除芯片

javascript - 来自 WebApi2 response.data 的 Angular ng-repeat 刷新

©2024 IT工具网  联系我们