CODEWITHSUNDEEP
javascript
MPortman
MPortman

Reputation: 181

Trouble looping through the inputs and adding them

Having an issue with peoplePaid() looping through all the inputs with the .persons class on a page through an add button. I believe this issue is that #paidTotal is trying to add contents from an array in .persons but can't access them (gives me an undefined error in console).

This variable works but only if there's one .persons class with a variable...

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

However I need it to dynamically loop the values of the array that is created through .persons elements. What am I missing?

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>

Upvotes: 0

Views: 46

Answers (2)

Mamun
Mamun

Reputation: 68933

paidTotal is an element. I believe you do not want to use += on the element itself. You should add the total to a variable.

Also, as the index of collections are 0 based, you have to start the value of i from 0. You have to take the value property from each element.

Please Note: It is good practice to use textContent instead of innerHTML when dealing with text only content.

Try the following way:

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>

Upvotes: 1

Hassan Sadeghi
Hassan Sadeghi

Reputation: 1326

Some mistakes exists in your code:

  1. paidTotal is an element but in paidTotal += personsCheck[i]; you have used it some a numeric variable.
  2. in your loop, index must starts from zero not one.
  3. in this line: paidTotal += personsCheck[i]; you have added personsCheck[i] element to paidTotal instead of its value.

the corrected code is like this:

function peoplePaid() {
  var checkTotal = parseFloat(document.getElementById('check').value);
  var personsCheck = document.getElementsByClassName('persons');
  var paidTotal = 0;
  
  for (var i = 0; i < personsCheck.length; i += 1) {
    paidTotal += personsCheck[i].value * 1;
  }
  document.getElementById('paidTotal').innerHTML = checkTotal - paidTotal;
}
$ <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>

Upvotes: 1

Related Questions