Javascript 带值按钮，如何计算总价_Javascript_Html

Javascript 带值按钮，如何计算总价

javascript html

Javascript 带值按钮，如何计算总价,javascript,html,Javascript,Html,首先，我想说的是，对于java脚本，我是一个非常新的初学者，没有其他技能。我似乎对我的编码有点迷茫。我有两组选项，每个选项中有三个选项。每种选择都有自己的价格。如何计算总价 JavaScript（包含在HEAD中） var theForm=document.forms[“pizzaOrder”]； var pizza_price=新数组（）；比萨价格[“肉类爱好者”]=15.50；比萨价格[“素食爱好者”]=12.50；比萨价格[“至尊”]=20.00；函数getPizzaPrice（）

首先，我想说的是，对于java脚本，我是一个非常新的初学者，没有其他技能。我似乎对我的编码有点迷茫。我有两组选项，每个选项中有三个选项。每种选择都有自己的价格。如何计算总价

JavaScript（包含在HEAD中）

var theForm=document.forms[“pizzaOrder”]；
var pizza_price=新数组（）；
比萨价格[“肉类爱好者”]=15.50；
比萨价格[“素食爱好者”]=12.50；
比萨价格[“至尊”]=20.00；
函数getPizzaPrice（）{
var pizzaPrice=0；
var theForm=document.forms[“pizzaOrder”]；//您已经在全局范围内声明了“theForm”-无需在此处重新声明它来保存相同的引用-crush
var pizzaType=theForms.elements[“pizzaType”]；//此处错贴了“theForm”-crush
对于（变量i=0；i


HTML

披萨
网上订购
选择你的比萨饼

肉食爱好者12.50美元

素食爱好者12.50美元

最高12.50美元

添加额外的浇头

额外奶酪1美元

蘑菇1.10美元

凤尾鱼1.25美元


我现在迷路了，因为它似乎不起作用。非常感谢您提供的任何帮助。
您的代码通常会被清理一番，但您的功能问题是，您应该使用对象而不是数组来保存商品价格。尽管进行了清理，请尝试以下操作：
var pizza_price = {
    "meatLover": 15.50,
    "veggieLover": 12.50,
    "supreme": 20.00
};
var extra_top = {
    "extraChees": 1.00,
    "mushrooms": 1.10,
    "anchovies": -1.25
};

function getPizzaPrice() {
    var pizzaPrice=0;
    var theForm = document.forms["pizzaOrder"];
    var pizzaType = theForms.elements["pizzaType"];
    for(var i = 0; i < pizzaType.length; i++) {
        if(pizzaType[i].checked) {
            pizzaPrice += pizza_price[pizzaPrice[i].value];
        }
    }
    return pizzaPrice;
}

function getToppingPrice() {
    var toppingPrice=0;
    var theForm = document.forms["pizzaOrder"];
    var extraTop = theForm.elements["extraTop"];
    for(var i = 0; i < extraTop.length; i++) {
        if(extraTop[i].checked) {
            toppingPrice += extra_top[extraTop[i].value];
        }
    }
    return toppingPrice;
}

function getTotal() { return getPizzaPrice() + getToppingPrice(); }

var\u价格={
“肉食爱好者”：15.50，
“素食爱好者”：12.50，
“最高”：20.00
};
var extra_top={
“课外活动”：1.00，
“蘑菇”：1.10，
“凤尾鱼”：-1.25
};
函数getPizzaPrice（）{
var pizzaPrice=0；
var theForm=document.forms[“pizzaOrder”]；
var pizzaType=forms.elements[“pizzaType”]；
对于（变量i=0；i

如果你想创建一个JSFIDLE，我会仔细看看。
根据jsLint，你应该使用[]
而不是新数组（）
“不起作用”。。多描述性啊。你的代码中到处都是语法错误。请阅读我在上面代码中添加的注释。添加一个价格后，您将打破循环。去掉break语句。不必遍历所有的单选元素，只需执行以下操作：form.elements['pizzaType'].value
。一次只能检查一个无线电元件。
<body onload="hideTotal">
<h1>Pizza To Go</h1>
<h2>Order Online</h2>
<form action="" id="PizzaOrder" onsubmit="return false;">
    <p>Select Your Pizza!<br />
        <input type="radio" name="pizzaType" value="meatLover" onclick="calculateTotal()"/> Meat Lover $12.50<br />
        <input type="radio" name="pizzaType" value="veggieLover" onclick="calculateTotal()"/> Veggie Lover $12.50<br />
        <input type="radio" name="pizzaType" value="supreme" onclick="calculateTotal()"/> Supreme $12.50<br />
    <p>Add Extra Toppings!<br />
        <input type="checkbox" name="extraTop" value="extraCheese" onclick="calculateTotal()"/> Extra Cheese $1<br />
        <input type="checkbox" name="extraTop" value="mushrooms" onclick="calculateTotal()"/> Mushrooms $1.10<br />
        <input type="checkbox" name="extraTop" value="anchovies" onclick="calculateTotal()"/> Anchovies $1.25<br /> 
</form>
</body>

var pizza_price = {
    "meatLover": 15.50,
    "veggieLover": 12.50,
    "supreme": 20.00
};
var extra_top = {
    "extraChees": 1.00,
    "mushrooms": 1.10,
    "anchovies": -1.25
};

function getPizzaPrice() {
    var pizzaPrice=0;
    var theForm = document.forms["pizzaOrder"];
    var pizzaType = theForms.elements["pizzaType"];
    for(var i = 0; i < pizzaType.length; i++) {
        if(pizzaType[i].checked) {
            pizzaPrice += pizza_price[pizzaPrice[i].value];
        }
    }
    return pizzaPrice;
}

function getToppingPrice() {
    var toppingPrice=0;
    var theForm = document.forms["pizzaOrder"];
    var extraTop = theForm.elements["extraTop"];
    for(var i = 0; i < extraTop.length; i++) {
        if(extraTop[i].checked) {
            toppingPrice += extra_top[extraTop[i].value];
        }
    }
    return toppingPrice;
}

function getTotal() { return getPizzaPrice() + getToppingPrice(); }