使用动态文本框进行计算

时间:2018-11-11 16:11:00

标签: javascript

我正在使用动态文本框。使用此动态文本框,我想执行一个计算:

计算很简单。我想计算文本框的总值。

在我的示例中,我使用3个文本框,其ID为s: value1 , value2 and value3`。

我要进行的计算是: value1 + value2 + value3 = total

在我的JavaScript中,我不想定义所有这些值s becouse the possible id的数字是无限的。

所以我的问题是。如何在不定义每个ID的情况下获得值的总数。

这是我的剧本:

Items:<br />
<input type="text" name="value[]" id="value1" placeholder="Value 1" onChange="getPrice(this.value)" /> <br />
<input type="text" name="value[]" id="value2" placeholder="Value 2" onChange="getPrice(this.value)" /> <br />
<input type="text" name="value[]" id="value3" placeholder="Value 3" onChange="getPrice(this.value)"/> <br />
<br />
Total: <br />
<input type="text" name="total" id="total" placeholder="Total"/> <br />

<script>
function getPrice() {         
  var numVal1 = Number(document.getElementById("value").value);

  var totalValue = numVal1;
  document.getElementById("total").value = totalValue.toFixed(2);
}
</script>

示例:http://jsfiddle.net/8vhot05u/

1 个答案:

答案 0 :(得分:3)

您可以遍历所有value[]的输入并对它们进行汇总:

 let total = 0;
 for(const el of document.getElementsByName("value[]"))
   total += +el.value;

 document.getElementById("total").value = total;