[英]How to auto sum dynamic input fields in javascript
I'm trying to make an auto sum.我正在尝试进行自动求和。
I'm starting with a text input field and a button.我从一个文本输入字段和一个按钮开始。 Pushing the button ads a new input field.
按下按钮会显示一个新的输入字段。 Sum field should get ... the sum.
Sum 字段应该得到......总和。 I have troubles adding the values in javascipt.
我在 javascipt 中添加值时遇到了麻烦。
Thanks!谢谢!
var counter = 1;
sum.value= number0.value;
function addNumber(divName){
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='number" + counter + "'>";
document.getElementById(divName).appendChild(newdiv);
sum.value += document.getElementById("number' + counter + '").value;
nr++;
}
...
<div id="field"> Add value: <input type="button" value="add" onClick="addNumber('total');"><br>
<div id="total"><input type="text" name="number0"></div>
<input type="text" name="sum" id="sum">
I think this is what you are trying to do:我认为这就是你想要做的:
var counter = 1;
function addNumber(divName){
var sum = document.getElementById('sum');
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='number" + counter + "'>";
document.getElementById(divName).appendChild(newdiv);
sum.value = getSum(counter);
counter++;
}
function getSum(numberOfDivs) {
var sum = 0;
for (var i=0 ; i<numberOfDivs; i++) {
sum += parseInt(document.getElementsByName('number' + i)[0].value);
}
return sum;
}
Check this plunk: http://plnkr.co/edit/5UE6YyDWmaHq5ZvVY542检查这个 plunk: http : //plnkr.co/edit/5UE6YyDWmaHq5ZvVY542
Note : Explanation of the code is after the snippet.注意:代码的解释在代码段之后。
Here's a rewrite of your code that accounts for NaN
results and updates as the fields are changed (not only when the "Add" button is clicked).这是您的代码的重写,它考虑了
NaN
结果和字段更改时的更新(不仅在单击“添加”按钮时)。 It also dynamically generates the first field, too.它还动态生成第一个字段。 ;)
;)
window.onload = function() { var counter = 0, sum = document.getElementById('sum'); document.getElementById('add').addEventListener('click', function() { counter += addNumber(counter, sum); }); counter += addNumber(counter, sum); }; function addNumber(counter, sum) { calculateSum(sum); var newdiv = document.createElement('div'); newdiv.innerHTML = '<input type="text" name="number' + counter + '" class="number" />'; newdiv.addEventListener('keyup', function() { calculateSum(sum); }); sum.parentNode.insertBefore(newdiv, sum); return 1; } function calculateSum(sum) { sum.value = 0; var divs = document.getElementsByClassName('number'); for(var i = 0; i < divs.length; i++) { sum.value = (isNaN(parseInt(sum.value)) ? 0 : parseInt(sum.value)) + (isNaN(parseInt(divs[i].value)) ? 0 : parseInt(divs[i].value)); } }
<div id="field"> Add value: <input type="button" value="add" id="add" /> <br /> <input type="text" name="sum" id="sum" /> </div>
It's pure JavaScript and is set-up to run without needing to call the functions from within the HTML.它是纯 JavaScript 并且设置为无需从 HTML 中调用函数即可运行。
Simply put, I separated the addNumber()
into two functions.简单地说,我将
addNumber()
分成两个函数。 One to add a new field and the other to determine the total sum.一个用于添加新字段,另一个用于确定总和。
The addNumber()
adds a new number field, applies an EventListener
to the added fields to execute the calculatSum()
whenever the browser recognizes a keyup
event, and returns a value of 1
which is then added to the counter
variable. addNumber()
添加一个新的数字字段,将EventListener
应用于添加的字段以在浏览器识别出keyup
事件时执行calculatSum()
,并返回值1
,然后将其添加到counter
变量中。
The calculateSum()
zeros the sum and recalculates using the .number
I added to the generated input
fields. calculateSum()
将总和归零并使用我添加到生成的input
字段的.number
重新计算。 It is NaN
-safe.它是
NaN
。 Basically, this means the values that are ran through parseInt()
are then checked that they are numbers.基本上,这意味着然后检查通过
parseInt()
运行的值是否为数字。 If parseInt()
fails, it reports the value as Not a Number
, or NaN
.如果
parseInt()
失败,它会将值报告为Not a Number
或NaN
。 The function forces it to report a value of 0
instead of NaN
.该函数强制它报告值
0
而不是NaN
。
To top it off, the script starts by defining the counter
variable as 0
, adding an EventListener
for whenever the "Add" button gets clicked, and executes the addNumber()
to place the first number field.最重要的是,脚本首先将
counter
变量定义为0
,每当单击“添加”按钮时添加一个EventListener
,并执行addNumber()
以放置第一个数字字段。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.