如何对文本框数组中存储的值求和

How to sum values stored in an array of textboxes

本文关键字：存储 求和 数组 文本      更新时间：2023-09-26

如何使用javascript对存储在文本框数组中的值求和并将其显示在单独的<div id="hasil"></div>中。

谢谢大家。

这是我的javascript： 

function tambah() {
    var sum = 0;
    var cost = document.getElementsByName('jumlah[]');
    for (var i = 0; i < cost.length; i++)
    {
        sum += parseFloat(cost[i].value);
    }
    document.getElementById('hasil').value = sum;
}
<html>
    <body>
        <form id="hitung" name="hitung">
            <label>Jumlah</label> <br> 
            <span class="input-group-addon">Rp.</span>
            <input name="jumlah[]" type="text" class="form-control" onChange="tambah();" >
            <span class="input-group-addon">,00</span><br>
            <span class="input-group-addon">Rp.</span>
            <input name="jumlah[]" type="text" class="form-control" onChange="tambah();" >
            <span class="input-group-addon">,00</span><br>
            <span class="input-group-addon">Rp.</span>
            <input name="jumlah[]" type="text" class="form-control" onChange="tambah();" >
            <span class="input-group-addon">,00</span>
            <div id="hasil"></div>
        </form>
    </body>
</html>

问题似乎是由于设置#hasil元素的值。DIV 元素没有value因此不能使用 .value = sum; 。

相反，您可以尝试：

document.getElementById('hasil').innerHTML = sum;

这是一个工作示例

function tambah(){
      var taxtva1 = $("#1").val();
      var taxtva2 = $("#2").val();
      var taxtva3 = $("#3").val();
      var total = Number(taxtva1) + Number(taxtva2) + Number(taxtva3);
     ("#hasil").text(total);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <html>
        <body>
            <form id="hitung" name="hitung">
    <label>Jumlah</label> <br> 
    <span class="input-group-addon">Rp.</span>
    <input name="sum" id="1" type="text" class="form-control" onChange="tambah();" >
    <span class="input-group-addon">,00</span><br>
    <span class="input-group-addon">Rp.</span>
    <input name="sum" id="2" type="text" class="form-control" onChange="tambah();" >
    <span class="input-group-addon">,00</span><br>
    <span class="input-group-addon">Rp.</span>
    <input name="sum" id="3" type="text" class="form-control" onChange="tambah();" >
    <span class="input-group-addon">,00</span>
    <div id="hasil"></div>
              </form>
          </body>
      </html>
相关文章：