这是我第一次在这个网站上发帖。我有一个网页,概述了我打算销售的产品之一
这是我的困境。我有这个代码,要求用户按+和 - 按钮获取他们想要的项目数量。现在我想要解决的是,如果用户按下+或 - 任何次数,我需要能够考虑点击次数并在单独的行上计算订单的总价格。我非常新的javascript所有帮助表示赞赏
<form>
<br> Item Price: $463.50
<br> Please Select Quantity
<input type='button' name='subtract' onclick='javascript: document.getElementById("qty").value--;' value='-'/>
<input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'/>
<input type='text' name='qty' id='qty' />
</form>
答案 0 :(得分:1)
我会将Javascript代码分离到自己的&lt; script&gt;元素,并执行以下操作:
<form>
<br/> Item Price: $<span id="price">463.50</span>
<br/> Please Select Quantity
<input type="button" name="subtract" id="subtract" value="-"></input>
<input type="button" name="add" id="add" value="+"></input>
<input type="text" name="qty" id="qty" value="0"></input>
<br/> Total
<input type="text" name="total" id="total" value="0"></input>
</form>
Javascript看起来像:
$(function() {
var price = parseFloat($('#price').text());
$('#subtract').on("click",function() {
var $qty = $('#qty');
var current = parseInt($qty.val());
if ( current > 0 ) {
$qty.val(current-1);
$('#total').val(price*(current-1));
} else {
$('#total').val(0);
}
});
$('#add').on("click",function() {
var $qty = $('#qty');
var current = parseInt($qty.val());
$qty.val(current+1);
$('#total').val(price*(current+1));
});
});
你可以see it in action。
没有jQuery,这一切都可以,但它让生活变得更轻松!
由于您提到了您对此的陌生,请注意警告:在真实应用中,只使用页面中的数量,并重新计算出背面的充电量结束。有人可以很容易地修改DOM中的价格或总价;如果您使用DOM的价格或总价,那么恶意用户可以以他们想要的任何价格购买它!始终假设输入是恶意的或不正确的。
答案 1 :(得分:1)
<form>
<br> Item Price: $<span id='price'>463.50</span>
var unitprice = (document.getElementById('price').innerText || document.getElementById('price').textContent);
var price = parseFloat(unitprice);
var count = parseInt(document.getElementById("qty").value, 10)
var total = price * count;
alert(total); // or do whatever you want
答案 2 :(得分:0)
var value = parseInt(document.getElementById("qty").value, 10)
item_price = item_price * value;
document.getElementById("someid").innertHTML = item_price;