Question

没有任何错误，但尝试遍历所有输入并将它们全部添加到总计中（var = paidTotal）。当使用添加按钮添加其他输入时，第一个输入有效，但其余输入则无效。循环有问题吗？

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

Answer 1

id必须是唯一的。您只会从document.getElementById（）获得一个元素。

尝试使用类，例如

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

并使用document.getElementsByClassName（'persons'）获取具有该类的所有输入字段的数组。

Answer 2

设为班级

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

并通过

访问

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

Answer 3

您的代码逻辑不是您想要实现的。

我找不到使用id=personsCheck的输入元素的任何逻辑。

首先，您一次又一次地向输入元素添加相同的id，这是无效的，因为在文档id中，属性必须是唯一的。改用class属性。

要获取总数，您可以先使用querySelectorAll()获取元素，然后使用forEach()遍历所有元素以一个一个地添加。

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

通过多个输入进行数学运算

3 个答案: