我正在尝试根据此输入类型数字表单中的输入计算总数(这是我第一次这样做)但我无法根据选择输出数量来输出数量。我不确定我做错了什么。 (即如果项目是$ 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/
答案 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;。
修改强>
<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;
注意:请注意,某些浏览器可能不支持输出标记。
这是一个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);
&#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;