时间戳

首页 > 解决方案 > 无法循环输入并添加它们

javascript - 无法循环输入并添加它们

问题描述

通过添加按钮在页面上peoplePaid()使用类循环遍历所有输入时遇到问题。.persons我相信这个问题是#paidTotal试图从数组中添加内容.persons但无法访问它们（在控制台中给我一个未定义的错误）。

此变量有效，但仅当有一个.persons带有变量的类时...

var personsCheck = parseFloat(document.getElementsByClassName('persons')[0].value);

.persons但是我需要它来动态循环通过元素创建的数组的值。我错过了什么？

function peoplePaid() {
  var checkTotal = parseFloat(document.getElementById('check').value);
  var personsCheck = document.getElementsByClassName('persons');
  var paidTotal = document.getElementById('paidTotal');

  for (var i = 1; i < personsCheck.length; i += 1) {
    paidTotal += personsCheck[i];
  }
  paidTotal.innerHTML = checkTotal - personsCheck;
}
$ <input type="text" id="check" value="" />

<h3>Number of People: <span id="numberOfPeople"></span></h3>

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

标签： javascript

解决方案

paidTotal是一个元素。我相信你不想+=在元素本身上使用。您应该将总计添加到变量中。

此外，由于集合的索引是基于 0 的，因此您必须i从 from的值开始0。您必须value从每个元素中获取属性。

请注意：最好在处理纯文本内容时使用textContent，而不是。innerHTML

试试下面的方法：

function peoplePaid() {
  var checkTotal = parseFloat(document.getElementById('check').value);
  var personsCheck = document.getElementsByClassName('persons');
  var paidTotal = document.getElementById('paidTotal');
  var pCheck = 0;
  for (var i = 0; i < personsCheck.length; i += 1) {
    pCheck += personsCheck[i].value;
  }
  paidTotal.textContent = checkTotal - pCheck;
}
$ <input type="text" id="check" value="" />

<h3>Number of People: <span id="numberOfPeople"></span></h3>

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

推荐阅读