尝试在考虑所选Javascript数量的情况下计算项目的总价
Trying to calculate the total price of items taking into account the quantity selected Javascript
这是我第一次在这个网站上发帖。我有一个网页,概述了我的一个产品,我打算出售
这就是我的困境。我有一个代码,要求用户按下+和-按钮来获得他们想要的物品数量。现在我想弄清楚的是,如果用户按+或-任意次数,我需要能够考虑点击次数,并在单独的一行上计算订单的总价。我是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>
<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
我会将Javascript代码分离成自己的<脚本>元素,并做一些类似的事情:
<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));
});
});
你可以在行动中看到它。
没有jQuery,这一切都是可以做到的,但它让生活变得轻松多了!
既然你提到你是新手,请注意:在真正的应用程序中,只使用页面中的数量,并重新计算在后端收取的费用。对某人来说,在DOM中修改价格或总额是非常容易的;如果你使用DOM的价格或总额,那么恶意用户可以以他们想要的任何价格购买它!始终假设输入是恶意的或不正确的。
var value = parseInt(document.getElementById("qty").value, 10)
item_price = item_price * value;
document.getElementById("someid").innertHTML = item_price;
相关文章:
- 在不渲染的情况下计算字符串大小
- 在不使用集合的情况下将服务器端计算返回到客户端
- 在 JavaScript 中给定时区字符串的情况下计算 UTC 偏移量
- 是否有一个JavaScript库可以在没有UI的情况下进行电子表格计算
- 在不重置对象的情况下重新计算计算可观察量
- 我可以在没有对象函数调用的情况下获取(可能是计算的)属性值吗?
- 如何在不考虑转换的情况下计算getBoundingClientRect()
- 在没有javascript的情况下计算页面加载时间
- 在给定 2D 方向矢量的情况下,如何计算沿 y 轴的旋转
- 有没有办法在不使用表单的情况下计算数字并在HTML5中显示结果
- 是否可以在没有javascript的情况下以html形式动态进行计算
- 尝试在考虑所选Javascript数量的情况下计算项目的总价
- 如何在不排序的情况下使用JavaScript计算数组中有多少重复字符串
- 从web应用程序,如何在没有用户交互的情况下在客户端计算机上运行exe
- 如果startTime小于currenttime,在这种情况下如何计算正确的时间
- 如何在不计算隐藏元素的情况下获取索引
- 如何在不切换的情况下计算正确的数字
- 使用JavaScript计算发送丢失数据的表单(仅在某些情况下)
- 如何在不更改DOM的情况下计算文本选择的高度
- 如何在不移动元素的情况下计算元素的位置