Html从窗体到数组

Html Form to Array

本文关键字:数组 窗体 Html      更新时间:2024-05-31

我正在尝试创建一个简单的披萨订购程序。基本上,我制作了一个包含各种输入的表格,并试图将其中的信息放入数组中,但它不起作用,我不知道该怎么做才能起作用。我使用了在线脚本验证器,但似乎没有帮助,所以现在我陷入了困境。

<!DOCTYPE html>
<html>
<title>PizzaLife</title>
<script>
var smallPrice = 3.50;
var mediumPrice = 5.00;
var largePrice = 9.99;
var totalSmalls = 0;
var totalMediums = 0;
var totalLarges = 0;
function calculateOrder()//calculate the number of smalls, larges and medium pizzas
{
var smallPizza = new Array()
pizza[0] = document.form.smallP.value
pizza[0] = Number (smallPizza[0])
pizza[1] = document.form.smallC.value
pizza[1] = Number (smallPizza[1])
pizza[2] = document.form.small4.value
pizza[2] = Number (smallPizza[2])
pizza[3] = document.form.smallT.value
pizza[3] = Number (smallPizza[3])
pizza[4] = document.form.smallM.value
pizza[4] = Number (smallPizza[4])
var mediumPizza = new Array()
pizza[5] = document.form.mediumP.value
pizza[5] = Number (mediumPizza[5])
pizza[6] = document.form.mediumC.value
pizza[6] = Number (mediumPizza[6])
pizza[7] = document.form.medium4.value
pizza[7] = Number (mediumPizza[7])
pizza[8] = document.form.mediumT.value
pizza[8] = Number (mediumPizza[8])
pizza[9] = document.form.mediumM.value
pizza[9] = Number (mediumPizza[9])
var largePizza = new Array()
pizza[10] = document.form.largeP.value
pizza[10] = Number (largePizza[10])
pizza[11] = document.form.largeC.value
pizza[11] = Number (largePizza[11])
pizza[12] = document.form.large4.value
pizza[12] = Number (largePizza[12])
pizza[13] = document.form.largeT.value
pizza[13] = Number (largePizza[13])
pizza[14] = document.form.largeM.value
pizza[14] = Number (largePizza[14])
totalSmalls = smallPizza[0] + smallPizza[1] + smallPizza[2] + smallPizza[3] + smallPizza[4];
totalMediums = mediumPizza[5] + mediumPizza[6] + mediumPizza[7] + mediumPizza[8] + mediumPizza[9];
totalLarges = largePizza[10] + largePizza[11] + largePizza[12] + largePizza[13] + largePizza[14];
alert ("you have ordered " + totalSmalls + "Small pizas");
}
function resetOrder() //to reset the page and order
{
if (confirm ("Are you sure you want to reset the order?") == true)
{
window.location.reload()
}
}


</script>
<body>
<p><font face = "jokerman" size="10" color="DarkGreen"><b>PizzaLife  NZ</b></font>
<font face="jokerman" size="6" color="DarkGreen"><i>  Online</i></font></p>
<p><font face = "Arial Black" size = "2">Use the arrows to take your pick of our pizzas!</font><br>
<i>note: max per order is 9 pizzas</i></p>
<form name = "form">
<font face = "Arial Black" size = "2">
<font face = "Arial Black" size = "2" color = "red">Pepperoni Pizza: </font><br>
Larges:<input type = "number" min = "0" max = "9" name = "largeP"> Mediums:<input type = "number" min = "0" max = "9" name = "mediumP"> smalls:<input type = "number" min = "0" max = "9" name = "smallP"><br>
<font face = "Arial Black" size = "2" color = "red">Cheesy Pizza: </font><br>
Larges:<input type = "number" min = "0" max = "9" name = "largeC"> Mediums:<input type = "number" min = "0" max = "9" name = "mediumC"> smalls:<input type = "number" min = "0" max = "9" name = "smallC"><br>
<font face = "Arial Black" size = "2" color = "red">4Meats Pizza: </font><br>
Larges:<input type = "number" min = "0" max = "9" name = "large4"> Mediums:<input type = "number" min = "0" max = "9" name = "medium4"> smalls:<input type = "number" min = "0" max = "9" name = "small4"><br>
<font face = "Arial Black" size = "2" color = "red">TooHot Pizza: </font><br>
Larges:<input type = "number" min = "0" max = "9" name = "largeT"> Mediums:<input type = "number" min = "0" max = "9" name = "mediumT"> smalls:<input type = "number" min = "0" max = "9" name = "smallT"><br>
<font face = "Arial Black" size = "2" color = "red">minceNcheese Pizza: </font><br>
Larges:<input type = "number" min = "0" max = "9" name = "largeM"> Mediums:<input type = "number" min = "0" max = "9" name = "mediumM"> smalls:<input type = "number" min = "0" max = "9" name = "smallM"><br>
</font>
</form>
<p>
---------------------&lsaquo;<input type = "button" value = "reset" onclick = "resetOrder()"><input type = "button" value = "Get Em!" onclick = "calculateOrder()">&rsaquo;------------------------
</p>
</body>
</html>

尝试使用以下代码:

    <!DOCTYPE html>
    <html>
    <title>PizzaLife</title>
    <script>
    var smallPrice = 3.50;
    var mediumPrice = 5.00;
    var largePrice = 9.99;
    var totalSmalls = 0;
    var totalMediums = 0;
    var totalLarges = 0;
    function calculateOrder()//calculate the number of smalls, larges and medium pizzas
    {
    var pizza = new Array()
    var smallPizza = new Array()
    smallPizza[0] = Number(document.form.smallP.value)
    smallPizza[1] = Number(document.form.smallC.value)
    smallPizza[2] = Number(document.form.small4.value)
    smallPizza[3] = Number(document.form.smallT.value)
    smallPizza[4] = Number(document.form.smallM.value)
    var mediumPizza = new Array()
    mediumPizza[5] = Number(document.form.mediumP.value)
    mediumPizza[6] = Number(document.form.mediumC.value)
    mediumPizza[7] = Number(document.form.medium4.value)
    mediumPizza[8] = Number(document.form.mediumT.value)
    mediumPizza[9] = Number(document.form.mediumM.value)
    var largePizza = new Array()
    largePizza[10] = Number(document.form.largeP.value)
    largePizza[11] = Number(document.form.largeC.value)
    largePizza[12] = Number(document.form.large4.value)
    largePizza[13] = Number(document.form.largeT.value)
    largePizza[14] = Number(document.form.largeM.value)
    totalSmalls = smallPizza[0] + smallPizza[1] + smallPizza[2] + smallPizza[3] + smallPizza[4];
    totalMediums = mediumPizza[5] + mediumPizza[6] + mediumPizza[7] + mediumPizza[8] + mediumPizza[9];
    totalLarges = largePizza[10] + largePizza[11] + largePizza[12] + largePizza[13] + largePizza[14];
    alert ("you have ordered " + totalSmalls + " Small pizzas " + totalMediums + " Mediums and " + totalLarges + " Larges." );
    }
    function resetOrder() //to reset the page and order
    {
    if (confirm ("Are you sure you want to reset the order?") == true)
    {
    window.location.reload()
    }
    }


    </script>
    <body>
    <p><font face = "jokerman" size="10" color="DarkGreen"><b>PizzaLife  NZ</b></font>
    <font face="jokerman" size="6" color="DarkGreen"><i>  Online</i></font></p>
    <p><font face = "Arial Black" size = "2">Use the arrows to take your pick of our pizzas!</font><br>
    <i>note: max per order is 9 pizzas</i></p>
    <form name = "form">
    <font face = "Arial Black" size = "2">
    <font face = "Arial Black" size = "2" color = "red">Pepperoni Pizza: </font><br>
    Larges:<input type = "number" min = "0" max = "9" name = "largeP"> Mediums:<input type = "number" min = "0" max = "9" name = "mediumP"> smalls:<input type = "number" min = "0" max = "9" name = "smallP"><br>
    <font face = "Arial Black" size = "2" color = "red">Cheesy Pizza: </font><br>
    Larges:<input type = "number" min = "0" max = "9" name = "largeC"> Mediums:<input type = "number" min = "0" max = "9" name = "mediumC"> smalls:<input type = "number" min = "0" max = "9" name = "smallC"><br>
    <font face = "Arial Black" size = "2" color = "red">4Meats Pizza: </font><br>
    Larges:<input type = "number" min = "0" max = "9" name = "large4"> Mediums:<input type = "number" min = "0" max = "9" name = "medium4"> smalls:<input type = "number" min = "0" max = "9" name = "small4"><br>
    <font face = "Arial Black" size = "2" color = "red">TooHot Pizza: </font><br>
    Larges:<input type = "number" min = "0" max = "9" name = "largeT"> Mediums:<input type = "number" min = "0" max = "9" name = "mediumT"> smalls:<input type = "number" min = "0" max = "9" name = "smallT"><br>
    <font face = "Arial Black" size = "2" color = "red">minceNcheese Pizza: </font><br>
    Larges:<input type = "number" min = "0" max = "9" name = "largeM"> Mediums:<input type = "number" min = "0" max = "9" name = "mediumM"> smalls:<input type = "number" min = "0" max = "9" name = "smallM"><br>
    </font>
    </form>
    <p>
    ---------------------&lsaquo;<input type = "button" value = "reset" onclick = "resetOrder()"><input type = "button" value = "Get Em!" onclick = "calculateOrder()">&rsaquo;------------------------
    </p>
    </body>
    </html>