Question

我正在尝试自动付款。

我从文本输入字段和按钮开始。按下按钮广告一个新的输入字段。 Sum字段应该得到......总和。我在javascipt中添加值时遇到了麻烦。

谢谢！

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">

Answer 1

注意：代码说明位于代码段之后。

以下是对代码的重写，这些代码会在字段更改时（不仅在单击“添加”按钮时）考虑NaN结果和更新。它也动态生成第一个字段。 ;）

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>

它是纯JavaScript，无需从HTML中调用函数即可运行。

简单地说，我将addNumber()分成了两个函数。一个用于添加新字段，另一个用于确定总和。

addNumber()添加一个新的数字字段，只要浏览器识别出EventListener事件，就会在添加的字段中应用calculatSum()来执行keyup，并返回一个值1的{{1}}，然后添加到counter变量。

calculateSum()将总和归零并使用我添加到生成的.number字段的input重新计算。这是NaN - 安全。基本上，这意味着检查通过parseInt()运行的值是否为数字。如果parseInt()失败，则会将值报告为Not a Number或NaN。该函数强制它报告值0而不是NaN。

最重要的是，脚本首先将counter变量定义为0，每当点击“添加”按钮时添加EventListener，然后执行{{1放置第一个数字字段。

Answer 2

我认为这就是你要做的事情：

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;
 }

检查此插件：http://plnkr.co/edit/5UE6YyDWmaHq5ZvVY542

如何在javascript中自动求和动态输入字段

2 个答案: