尝试计算输入类型编号中的总计输出

时间:2016-02-10 19:42:18

标签: javascript html html5 forms output

我正在尝试根据此输入类型数字表单中的输入计算总数(这是我第一次这样做)但我无法根据选择输出数量来输出数量。我不确定我做错了什么。 (即如果项目是$ 1.00&他们选择“5”,它将输出$ 5.00) 这是我的代码:

 <form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1)">
<legend>$1.00</legend>
<p><label for="quantity">QTY</label>
  <span>$</span><input type="number" min="1" max="5" id="quantity" name="quantity"></p>
 <p>Total: <strong>$<output name="amount" for="quantity"></output></strong></p>
</form> 

这是我的小提琴的链接: https://jsfiddle.net/Tamara6666/fzgsbvpf/

2 个答案:

答案 0 :(得分:0)

<form onsubmit="return false" oninput="">
<legend set="1">$1.00</legend>
<p><label for="quantity">QTY</label>
  <span>$</span><input type="number" min="1" max="5" id="quantity" name="rate"></p>
 <p>Total: <strong>$<output name="amount" for="quantity"></output></strong></p>
</form> 

JS

var dw = document.getElementById('quantity');
dw.onchange = function(){
var cur = this.value,
tocur = document.getElementsByTagName('legend')[0].getAttribute('set'),output = document.getElementsByTagName('output')[0];
var res = Math.floor(tocur * cur);
output.innerHTML = res;
}

答案 1 :(得分:0)

使用您的确切代码,您所缺少的只是&#39;)&#39;。

修改

&#13;
&#13;
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<p><label for="quantity">QTY</label>
  <span>$</span><input type="number" min="1" max="5" id="quantity" name="quantity"></p>
 <p>Total: <strong>$<output name="amount" for="quantity"></output></strong></p>
</form> 
&#13;
&#13;
&#13;

注意:请注意,某些浏览器可能不支持输出标记。

这是一个HTML5 + Jquery可能的解决方案

&#13;
&#13;
(function($){
	$(document).ready(function(){
  	$('input[name="rate"]').on('change keyup',function(){
    	calculate(this, 'output[name="amount"]');
    });
  });
  
  function calculate(input, target){
  	var value = $(input).val();
   	$(target).val(value * 1); 
  }

})(jQuery);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form onsubmit="return false">
<legend>$1.00</legend>
<p><label for="quantity">QTY</label>
  <span>$</span><input type="number" min="1" max="5" id="quantity" name="rate"></p>
 <p>Total: <strong>$<output name="amount" for="quantity"></output></strong></p>
</form>
&#13;
&#13;
&#13;