循环输入并添加它们

Question

Trying to loop through all the inputs, when more are added, and add them all to the total (var = paidTotal). I'm getting NaN for the total and Cannot read property 'length' of undefined. Pretty sure the issue is in the peoplepaid() function.

In the peoplePaid() onclick function I'm trying to loop through all the fieldInputs (class="person") depending on how many inputs are created and add the total to #paidTotal. Hopefully that's helpful.

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

The reason you are getting Cannot read property 'length' of undefined is because

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

will return undefined.

document.getElementsByClassName('persons')

will return an array of DOM elements and arrays do not have a value property. Then when you access

personsCheck.length

in the loop you get Cannot read property 'length' of undefined because personsCheck is undefined.

Answer 2

I refactored a bit but I used map to get an array of the values then summed them up using reduce

run the snippet below

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