javascript - 带有值的按钮，如何计算总价 - Thinbug

带有值的按钮，如何计算总价

时间：2014-01-29 22:05:35

标签： javascript html

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

JavaScript（包含在HEAD中）

var theForm = document.forms["pizzaOrder"];

var pizza_price = new Array();
pizza_price["meatLover"] = 15.50;
pizza_price["veggieLover"] = 12.50;
pizza_price["supreme"] = 20.00;

function getPizzaPrice() {
var pizzaPrice = 0;
var theForm = document.forms["pizzaOrder"]; //You already declared "theForm" at global scope - no need to redeclare it here to hold the same reference -crush
var pizzaType = theForms.elements["pizzaType"]; //Mispelled "theForm" here -crush

    for(var i = 0; i < pizzaType.length; i++) {
        if(pizzaType[i].checked) {
            pizzaPrice = pizza_price[pizzaPrice[i].value];
            break;
        }
    }

    return pizzaPrice;
}

var extra_top = new Array()
extraTop["extraChees"] = 1.00;
extraTop["mushrooms"] = 1.10;
extraTop["anchovies"]-1.25; //Obvious syntax error here -crush

function getToppingPrice() {
    var toppingPrice=0;
    var theForm = document.forms["pizzaOrder"];
    var extraTop = theForm.elements["extraTop"] //You forgot the semi-colon here -crush

    for(var i = 0; i < extraTop.length; i++) {
        if(extraTop[i].checked) {
            toppingPrice = extra_top[extraTop.value];
            break;
        }
    }
    return toppingPrice;
}

function getTotal() //You're missing an opening bracket here -crush
    var pizzaPrice = getPizzaPrice() + getToppingPrice();
    document.getElementbyId('totalPrice').innerHTML = "Total Price for Pizza is $" + pizzaPrice;
//You're missing a closing bracket here -crush

HTML

<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>

我现在迷路了，因为它似乎没有用。非常感谢任何帮助。

1 个答案:

答案 0 :(得分：0)

您的代码可能会在一般情况下被清理干净，但您的功能问题是您应该使用对象而不是数组来保存商品价格。尽管有清理，尝试这样的事情：

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(); }

如果你想创建一个jsfiddle，我会仔细看看。