将所选商品的总价相加(Javascript)
Adding up total price of selected items (Javascript)
本文关键字:Javascript 更新时间:2023-09-26
我遇到了一个问题。代码在这里:
// JavaScript Document
window.totalIt= function() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += 1;
}
}
if(total>=3){
document.getElementById("total").value = "$" + (total*29).toFixed(2);
}
else{
document.getElementById("total").value = "$" + (total*39).toFixed(2);
}
}
window.totalPrisDessert= function() {
var input = document.getElementsByName("dessert");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
}
<div id="formular">
<div id="formulartekst">
<form>
<h2 class="formskrift">Order Hot Food</h2>
<p class="kroner">$39 / $29 when 3 or more checked</p>
<input name="product" value="39" type="checkbox" id="p1" onclick="totalIt()" /> Monday
<br>
<input name="product" value="39" type="checkbox" id="p2" onclick="totalIt()" /> Tuesday
<br>
<input name="product" value="39" type="checkbox" id="p3" onclick="totalIt()" /> Wednesday
<br>
<input name="product" value="39" type="checkbox" id="p4" onclick="totalIt()" /> Thursday
<br>
<input name="product" value="39" type="checkbox" id="p5" onclick="totalIt()" /> Friday
<h2 class="formskrift">Dessert</h2>
<p class="kroner">$20 ALWAYS</p>
<input name="dessert" value="20" type="checkbox" id="p6" onclick="totalPrisDessert()"/>
Monday<br>
<input name="dessert" value="20" type="checkbox" id="p7" onclick="totalPrisDessert()"/>
Tuesday<br>
<input name="dessert" value="20" type="checkbox" id="p8" onclick="totalPrisDessert()"/>
Wednesday<br>
<input name="dessert" value="20" type="checkbox" id="p9" onclick="totalPrisDessert()"/>
Thursday<br>
<input name="dessert" value="20" type="checkbox" id="p10" onclick="totalPrisDessert()"/>
Friday<br>
<label>
<br> Total
<input value="$0.00" readonly type="text" id="total" />
</label>
<input type="submit" value="Order">
</form>
</div>
</div>
https://jsfiddle.net/u0y7aoct/2/
当我选中前 5 个框时,他们会在总框中添加价格。但是,如果我选中以下 5 个框(甜点)中的任何一个,价格就会覆盖。我需要显示总价格,但现在它们充当两个不同的。
试试这个更新的小提琴
基本上,创建一个通用方法,该方法可以同时执行两者
window.totalAll = function()
{
document.getElementById("total").value = (totalIt() + totalPrisDessert()).toFixed(2) ;
}
你不需要
调用两个不同的函数,你可以通过调用同一个函数来添加两个值,只需要检查一个条件是产品还是甜点。
var grndTotal = 0;
var total1 = 0;
var total2 = 0;
window.totalIt= function(name) {
if(name == "product"){
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += 1;
}
}
if(total>=3){ total1 = (total*29).toFixed(2);}
else{total1 = (total*39).toFixed(2);}
}
if(name == "dessert"){
var input = document.getElementsByName("dessert");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
total2 = total.toFixed(2);
}
grndTotal = parseInt(total2) + parseInt(total1);
document.getElementById("total").value = "$"+grndTotal ;
}
这是正常工作的更新函数。
https://jsfiddle.net/VijayDhanvai/hd103j4a/
只是因为你这样编程。您为每个案例创建了两个不同的函数,这些函数分别起作用。你期待什么?:)
你需要更多这样的东西:
window.totalIt = function() {
var input = document.getElementsByName("product");
var total = 0;
var count = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
count += 1;
}
}
if(count >= 3){
total = count * 29;
} else {
total = count * 39;
}
return total;
}
window.totalPrisDessert = function() {
var input = document.getElementsByName("dessert");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
return total;
}
window.grandTotal = function() {
var total = totalIt() + totalPrisDessert();
document.getElementById("total").value = "$" + total.toFixed(2);
}
当然,在 html 中使用新函数grandTotal()
。
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在JavaScript中将字符串转换为函数引用
- 模糊事件的Javascript测试
- Javascript更改图标
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用WCF服务和javascript表单post上传.doc文件
- javascript结合了数组和字典
- 这是什么 ==- javascript 运算符
- 从javascript创建一个列表
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Javascript:selenium Web驱动程序isDisplayed()不工作
- 如何通过ajax刷新JSF填充的javascript变量
- 如何在Javascript中将JSon对象转换为数组
- Javascript生成的表单未提交
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量