循環輸入並添加它們

Question

當添加更多輸入時，嘗試遍歷所有輸入，並將它們全部添加到總計中（var = paidTotal）。 我得到的總數是NaN，無法讀取未定義的屬性“ length”。 可以確定問題出在peoplepaid（）函數中。

在peoplePaid（）onclick函數中，我試圖遍歷所有fieldInputs（class =“ person”），具體取決於創建了多少輸入並將總和添加到#paidTotal中。 希望這會有所幫助。

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

您得到無法讀取未定義的屬性“長度”的原因是因為

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

將返回未定義。

document.getElementsByClassName('persons')

將返回DOM元素數組，並且該數組沒有value屬性。 然后，當您訪問

personsCheck.length

在循環中，您得到“無法讀取未定義的屬性” length”，因為personsCheck是未定義的。

Answer 2

我進行了一些重構，但是我使用map獲取了一個值數組，然后使用reduce對其求和

運行下面的代碼段

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