Как вычислить два значения входного текста в 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>

Обновленный фрагмент:

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