如何計算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 --> 
 
\t \t <div> \t \t \t \t \t \t 
 
\t \t \t <label>Product 1</label> 
 
\t \t \t <div><input type="text" id="value1"><?php echo ' x 10USD = ';?><span id="subtotal1"></span>USD</div> 
 

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

最終的結果應該是這樣的： [1]×10USD = 10USD [2]× 15USD = 30USD 總計：40USD

但是，上述代碼無法正常工作。 有沒有好的方法來完成它？

感謝您的幫助。

Answer 1

你有一個錯字。 <span id="#finaltotal"></span>應該<span id="finaltotal"></span>

更新的摘要：從id屬性

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

Answer 2

刪除亂碼，id="finaltotal"

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

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

它的工作原理！

http://jsfiddle.net/4edbv96r/