Question

在添加更多输入时，尝试遍历所有输入，并将它们全部添加到总计中（var = paidTotal）。我得到的总数是NaN，无法读取未定义的属性“ length”。可以确定问题出在peoplepaid（）函数中。

在peoplePaid（）onclick函数中，我试图遍历所有fieldInputs（class =“ person”），具体取决于创建了多少输入并将总和添加到#paidTotal中。希望这会有所帮助。

$(document).ready(function() {
  var maxFields = 20;
  var addButton = $('#plusOne');
  var deleteButton = $('#minusOne');
  var wrapper = $('#userNumbers');
  var fieldInput = '<div><input type="text" name="persons" class="persons"/></div>';
  var x = 1;

  $(addButton).click(function() {
    if (x < maxFields) {
      x++;
      $(wrapper).append(fieldInput);
    }
  });

  $(deleteButton).click(function(e) {
    e.preventDefault();
    var myNode = document.getElementById("userNumbers");
    i = myNode.childNodes.length - 1;
    if (i >= 0) {
      myNode.removeChild(myNode.childNodes[i]);
      x--;
    }

  });

});


function peoplePaid() {
  var checkTotal = document.getElementById('check').value;
  var personsCheck = document.getElementsByClassName('persons').value;
  var inputs = document.getElementsByClassName('persons');
  var paidTotal = document.getElementById('paidTotal');

  for (var i = 1; i < personsCheck.length; i += 1) {
    paidTotal[i] += personsCheck;
  }
  paidTotal.innerHTML = checkTotal - personsCheck;


}

<h3>Check Total</h3>
$ <input type="text" id="check" value="" />
<h3>Number of People: <span id="numberOfPeople"></span></h3>

<button type="button" onclick="plusOne()" id="plusOne">+</button>
<button type="button" onclick="minusOne()" id="minusOne">-</button>


<div>
  <div id="userNumbers">
    <input type="text" class="persons" name="person">
  </div>
</div>


<button onclick="peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
  <h3>Paid Amount: <span id="paidTotal"></span></h3>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

无法获取未定义的属性“ length”的原因是

var personsCheck = document.getElementsByClassName('persons').value;

将返回未定义。

document.getElementsByClassName('persons')

将返回DOM元素数组，并且该数组不具有value属性。然后，当您访问

personsCheck.length

在循环中，您获得“无法读取未定义的属性” length”，因为personsCheck未定义。

Answer 2

我做了一些重构，但是我使用map获取了一个值数组，然后使用reduce对其求和

运行下面的代码段

$(document).ready(function() {
  const maxFields = 20;
  const wrapper = $('#userNumbers');
  const fieldInput = '<div><input type="text" name="persons" class="persons"/></div>';
  const reducer = (a,c) => parseInt(a,10) + parseInt(c,10);

  $('#plusOne').click(() => 
    $("#userNumbers .persons").length < maxFields &&
    $(wrapper).append(fieldInput));
    
  $('#deleteButton').click(()=> $("#userNumbers .persons").last().remove());
  
  $('#peoplePaid').click( () => {
  const arr= $("#userNumbers .persons").map(function(){
    return $(this).val();
   }).get();
   $('#paidTotal').html(arr.reduce(reducer));  
   })
  
});

<h3>Check Total</h3>
$ <input type="text" id="check" value="" />
<h3>Number of People: <span id="numberOfPeople"></span></h3>

<button type="button"  id="plusOne">+</button>
<button type="button"  id="minusOne">-</button>


<div>
  <div id="userNumbers">
    <input type="number" class="persons" name="person">
  </div>
</div>


<button id="peoplePaid">Calculate</button>
<!--Paid Amount-->
<div>
  <h3>Paid Amount: <span id="paidTotal"></span></h3>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

循环输入并添加它们

2 个答案: