尝试以输入类型数字形式输出计算总数答案

【问题标题】：Attempting to calculate total in input type number form output尝试以输入类型数字形式输出计算总数
【发布时间】：2016-02-10 19:42:17
【问题描述】：

我正在尝试根据此输入类型数字表单中的输入来计算总数（这是我第一次这样做），但我无法让它根据选择输出金额&我'不知道我做错了什么。（即，如果项目是 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>

这是我的 Fiddle 的链接： https://jsfiddle.net/Tamara6666/fzgsbvpf/

【问题讨论】：

标签： javascript html forms output

【解决方案1】：

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

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;
}

【讨论】：

我能问你一下吗？ @格伦威尔金斯？我正在尝试对具有浮点数的其他 2 个值使用相同的形式（它们从 $2.50 和 $.30 开始）但是当我尝试应用相同的形式时，它对我来说无法正常工作/浮点值-我需要拿出 Math.floor 还是做其他不同的事情？
$2.50

数量

总计：$

[so var res = tocur * cur] ? @格伦威尔金斯？
或者添加另一个 JS 函数来连接不同的值？ : var dw = document.getElementById('quantity2'); dw.onchange = function(){ var cur = this.value, tocur = document.getElementsByTagName('legend2')[0].getAttribute('set'),output = document.getElementsByTagName('output')[0]; var res = (tocur * cur); output.innerHTML = res; } @格伦威尔金斯？

【解决方案2】：

使用您的确切代码，您所缺少的只是一个')'。

编辑

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

注意：请注意，某些浏览器可能不支持输出标签。

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

(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);

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

【讨论】：