CODEWITHSUNDEEP
javascripthtml
MPortman
MPortman

Reputation: 181

Math through multiple inputs

getting no errors but trying to loop through all the inputs and add them all to the total (var = paidTotal). The first input works but the rest don't when others are added with an add button. Something wrong with the loop?

$(document).ready(function() {
    var maxFields = 20;
    var addButton = $('#plusOne');
    var deleteButton = $('#minusOne');
    var wrapper = $('#userNumbers');
    var fieldInput = '<div><input type="text" name="persons" id="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.getElementById('personsCheck').value;
    var paidTotal = document.getElementById('paidTotal');

    for(var i = 1; i < personsCheck.length; i+=1){
        personsCheck[i] += paidTotal;
    }
    paidTotal.innerHTML = checkTotal - personsCheck;
    
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$ <input type="text" id="check" value="" />

<button type="button" id="plusOne">+</button>
<button type="button" id="minusOne">-</button>

<div id="userNumbers">
<div class="">
<input type="text" id="personsCheck" name="person">
</div>

<button onclick="peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
<h3>Paid Amount: <span id="paidTotal"></span></h3>
</div>

Upvotes: 0

Views: 90

Answers (3)

Mamun
Mamun

Reputation: 68933

Your code logic is not something what you want to achieve.

I can not find any logic to use the input element with id=personsCheck.

First of all, you are appending input element with same id again and again which is invalid, because in a document id attribute must be unique. Use class attribute instead.

To get the total you can first get the elements with querySelectorAll(), theb use forEach() to loop through all of them to add one by one. 

$(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 = Number(document.getElementById('check').value);
    var persons = document.querySelectorAll('.persons');
    var personsCheck = Number(document.getElementById('personsCheck').value)
    var paidTotal = document.getElementById('paidTotal');
    var total = 0;
    persons.forEach(function(p){
      total += Number(p.value);
    });
    
    paidTotal.textContent = checkTotal - total;
    
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$ <input type="text" id="check" value="" />

<button type="button" id="plusOne">+</button>
<button type="button" id="minusOne">-</button>

<div id="userNumbers">
<div class="">
<input type="text" id="personsCheck" name="person">
</div>

<button onclick="peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
<h3>Paid Amount: <span id="paidTotal"></span></h3>
</div>

Upvotes: 1

Pranoy Sarkar
Pranoy Sarkar

Reputation: 2233

make it as class

<input type="text" class="personsCheck" name="person">

and access it by 

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

Upvotes: 1

Jim B.
Jim B.

Reputation: 4694

ids have to be unique. You'll only get one element from document.getElementById().

Try using a class instead, something like

    var fieldInput = '<div><input type="text" name="persons" class="persons"/></div>';

and use document.getElementsByClassName('persons') to get an array of all of the input fields that have that class.

Upvotes: 1

Related Questions