如何在jQuery中计算两个输入文本值

Question

我想使用输入的文本值来计算产品的总价。

html代码和javascript代码段如下：

 $('input').keyup(function(){ // run anytime the value changes var firstValue = parseFloat($('#value1').val()) || 0; // get value of field var secondValue = parseFloat($('#value2').val()) || 0; // convert it to a float var subtotal1 = firstValue * 10; var subtotal2 = secondValue * 15; $('#subtotal1').html(subtotal1); // output it $('#subtotal2').html(subtotal2); // output it $('#finaltotal').html(subtotal1 + subtotal2); // output it }); 

 <!-- Product 1 --> <div> <label>Product 1</label> <div><input type="text" id="value1"><?php echo ' x 10USD = ';?><span id="subtotal1"></span>USD</div> <!-- Product 2 --> <div> <label>Product 2</label> <div><input type="text" id="value2"><?php echo ' x 15USD = ';?><span id="subtotal2"></span>USD</div> <!-- Total --> <div> <label>Total:</label> <div><span id="#finaltotal"></span>USD</div> </div> 

最终结果应类似于以下内容：[1] x 10USD = 10USD [2] x 15USD = 30USD总计：40USD

但是，以上代码无法正常工作。 有没有很好的方法来完成它？

谢谢你的帮助。

Answer 1

从id属性id="finaltotal"删除哈希

<label>Total:</label>
<div><span id="#finaltotal"></span>USD</div>

               ^-----------remove-----------

有用！

http://jsfiddle.net/4edbv96r/

Answer 2

你有错字 <span id="#finaltotal"></span>应为<span id="finaltotal"></span>

更新的代码段：

 $('input').keyup(function() { // run anytime the value changes var firstValue = parseFloat($('#value1').val()) || 0; // get value of field var secondValue = parseFloat($('#value2').val()) || 0; // convert it to a float var subtotal1 = firstValue * 10; var subtotal2 = secondValue * 15; $('#subtotal1').html(subtotal1); // output it $('#subtotal2').html(subtotal2); // output it var finalAnswer = (subtotal1 + subtotal2).toString(); $('#finaltotal').html(finalAnswer.replace(/\\B(?=(\\d{3})+\\b)/g, ",")); // output it }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Product 1 --> <div> <label>Product 1</label> <div> <input type="text" id="value1"> <?php echo ' x 10USD = ';?><span id="subtotal1"></span>USD</div> <!-- Product 2 --> <div> <label>Product 2</label> <div> <input type="text" id="value2"> <?php echo ' x 15USD = ';?><span id="subtotal2"></span>USD</div> <!-- Total --> <div> <label>Total:</label> <div><span id="finaltotal"></span>USD</div> </div>