计算jQuery中2个输入字段的总数

我有这个HTML表单：

<div>
    Amount 1: <input id="amount1" type="text" />
    <br>
    Amount 2: <input id="amount2" type="text" value="0.00">
    <br>
    <span id="result"></span>
</div>

我想做的是，当有人在表单中输入数字时，简单地计算并显示amount1+amount2。请注意，默认情况下，amount1为0.00

当我运行它时，它不计算任何东西。我做错了什么？

应该是这样的

$("#amount1").keyup(calc);
    $("#amount2").keyup(calc);
    function calc() {
      $('#result').html(
        parseInt($('#amount1').val(), 10) + parseInt($("#amount2").val(), 10)
      );
    }

---

span、div中的信息将作为html而不是值

在javascript中，div、span的数据将是innerHTML

在jquery中，div、span的数据将是html、append、text等

在处理浮点数时，请使用

parseFloat

而不是

parseInt

$（“#数量1”）.keyup（计算）；
$（“#数量2”）.keyup（计算）；
函数计算（）{
$（'#result'）.html(
parseFloat（$（“#amount1'）.val（），10）+parseFloat（$（“#amount2”）.val（），10）
);
}

金额1：


金额2：

我想您可以使用这个自定义代码段。请检查小提琴

HTML

项目
成本
项目1
项目2
项目3
项目4
项目5
全部的
0

jQuery

$（'body'）.on（'keyup'，'.elm'，函数（e）{
//检查按键是否按下回车键
如果（例如，keyCode！=13）{
var总和=0；
$（'.elm'）。每个（函数（）{
if（$（this.val（）！=''&！isNaN（$（this.val（）））{
sum+=parseInt（$（this.val（））；
}
});
元("总计").正文(总和);；
}
否则{
var itemNum=$（'#tbody tr'）。长度+1；
var newRow=''+
'项目'+itemNum+''+
''+
''+
''+
'';
$（“#tbody”）.append（newRow）；
}
});

---

span

元素不包含

.val

方法-而是设置

.text

属性当您显然在寻找整数（金额值）时，为什么设置

value=“0.00”

？非常感谢您的回答：）

$("#amount1").keyup(calc);
    $("#amount2").keyup(calc);
    function calc() {
      $('#result').html(
        parseInt($('#amount1').val(), 10) + parseInt($("#amount2").val(), 10)
      );
    }

<table>
<thead>
    <th>Item</th>
    <th>Cost</th>
</thead>
<tbody id="tbody">
    <tr>
        <td>Item 1</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 2</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 3</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 4</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>
    <tr>
        <td>Item 5</td>
        <td>
            <input type="text" class="elm" />
        </td>
    </tr>

</tbody>
<tfoot>
    <tr>
        <td>Total</td>
        <td>
            <label id="total">0</label>
        </td>
    </tr>
</tfoot>

 $('body').on('keyup','.elm',function(e){
    //Check Key Press is Enter
    if (e.keyCode != 13) {
        var sum = 0;
        $('.elm').each(function() {
            if($(this).val() != '' && !isNaN($(this).val())){
                sum += parseInt($(this).val());
            }
        });

        $('#total').text(sum);
    }
    else{
        var itemNum = $('#tbody tr').length + 1;
        var newRow = '<tr>'+
            '<td>Item'+itemNum+'</td>'+
            '<td>'+
                '<input type="text" class="elm">'+
            '</td>'+
        '</tr>';
        $('#tbody').append(newRow);
    }
});