计算JS，HTML形式的输入文本

Question

我是JavaScript的新手，试图汇总一个可以计算输入的表单。我已经获得了显示的总值，但显示为0，而不是每个具有输入的字段的总和。

我复制了几个示例，这似乎是最有效的

$('.form-group').on('input','.prc',function() {
    var totalSum = 0;
    $('form-group .prc').each(function() {
        var inputVal = $(this).val();
        if($.isNumeric(inputVal)){
            totalSum += parseFloat(inputVal);
        }
    });
    $('#result').text(totalSum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label>Energy</label>
    <input type="number" class="form-control prc"/>
</div>
<div class="form-group">
    <label>Justice</label>
    <input type="number" class="form-control prc"/>
</div>
<div class="form-group">
    <label>Total</label>
    <output id="result" class="form-control prc"/>
</div>

预期结果：总和应在输入数字时计算。并非所有字段都需要输入。总数必须等于100，而我还没有进入那部分。：(

Answer 1

您的问题是行

$('form-group .prc').each(function() {

将其更改为

$('.form-group input.prc').each(function() {

在形式组面前应该有一个" ."，您应该选择input.prc。否则，您也会将总回归添加到自己中。

$('.form-group').on('input','.prc',function(event) {
    var totalSum = 0;
    var currentInput = event.target;
                  
    $('.form-group input.prc').each(function() {
        var inputVal = $(this).val();
        if($.isNumeric(inputVal)){
            totalSum += parseFloat(inputVal);
            if (totalSum > 100) {
                totalSum -= currentInput.value;
                currentInput.value = "";                 
            }
        }
    });
    $('#result').text(totalSum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
    <label>Energy</label>
    <input type="number" class="form-control prc"/>
</div>
<div class="form-group">
    <label>Justice</label>
    <input type="number" class="form-control prc"/>
</div>
<div class="form-group">
    <label>Total</label>
    <output id="result" class="form-control prc"/>
</div>
<button id="submit-bn">submit</button>
</form>