Question

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

html代码和javascript代码段如下：

＆＃13;

$('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
});

＆＃13;

<!-- 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>

＆＃13;

最终结果应如下所示： [1] x 10USD = 10USD [2] x 15USD = 30USD 总计：40美元

但是，上述代码无法正常运行。有没有一个很好的方法来完成它？

感谢您的帮助。

Answer 1

从id属性id="finaltotal"

中删除哈希

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

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

有效！

http://jsfiddle.net/4edbv96r/

Answer 2

你有一个错字。 .slideshow { margin:auto; width: 80%; text-align: center;" }应为<span id="#finaltotal"></span>

更新了代码段：

＆＃13;

<span id="finaltotal"></span>

＆＃13;

$('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
});

＆＃13;

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

2 个答案: