Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Mike Portman
Mike Portman
8,335 Points

Loop through all inputs and add them

Hi. I'm trying to get all of my inputs added and places at the bottom of a page. Right now I'm getting a NaN error. The function peoplePaid() is the issue im having as it's not looping through each field input (class="persons") and giving the total. 

$(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 < inputs.length; i += 1) {
        paidTotal += inputs[i];
    }
    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>