Javascript代码——函数ToppingsWanted()有什么问题?

Javascript code-- What's wrong with function ToppingsWanted()?

本文关键字：什么 问题 代码 函数 ToppingsWanted Javascript      更新时间：2023-09-26

我有一些麻烦的JavaScript分配的一部分。它涉及到使用两个数组:一个有元素，一个没有元素，如下所示。我已经包含了数组工作所需的所有代码，所以你不会被任何细节所迷惑，我会在后面解释。

下面是两个数组。数组'toppings'被元素填充，这些元素随后也会出现在列表框中。它下面的数组'selectedToppings'是一个空数组，它将保存用户从列表框中选择的元素。

var toppings = [ "Sausage" , "Pepperoni" , "Extra Cheese" , "Onions" ,
"Black Olives" , "Anchovies" , "Pineapple" , "Canadian Bacon" , "Ground Beef" ];
var selectedToppings = [];

下面的函数是程序的输出。当我第一次写它的时候，它没有显示任何东西，因为没有一个函数调用是正确的。我最近一直在做的是在每个函数调用之后放一个分号，并确保适当的函数在移动到下一个之前正确工作。现在我被困在函数ToppingsWanted()上。您会注意到"Amount Due:"后面有一个分号——这就是我之前提到的分号。我很确定函数调用是正确的，因为在它之前的函数quantity()和Size()工作得很好。

function thankYou()
{
document.pizzaForm.OrderText.value="Thank you for your order from BHC Pizza!'nYou have
ordered " + quantity() + " " + Size() + " pizza(s) with'n" + ToppingsWanted() +
"AmountDue "; 
}

你在下面看到的函数ToppingsWanted()就是让我感到悲伤的东西。我试了很多方法让它工作，但没有任何效果。我访问了这个网站，检查了w3c学校，但找不到任何关于如何使这项工作的答案。在这一点上，我对JavaScript数组的了解还不够，不知道这里出了什么问题。需要做的是:当用户从前面提到的列表框中选择一个配料(函数下面显示的代码)时，从配料数组中取出适当的元素并放入selectedToppings数组中，然后函数调用将在其各自的行中显示selectedToppings数组中的每个元素。Dreamweaver显示没有语法错误，但我不知道是否有逻辑错误。帮助吗?

function ToppingsWanted()
{
for (var i=0; i<10; i++);
{
    if (document.pizzaForm.lstIngredients.toppings[i].selected==true)
        selectedToppings.push[i];
}
var TopsSelect=selectedToppings.join("'n");
return TopsSelect;
}
<select name="lstIngredients" size="9" multiple="multiple">
        <option id="toppings[0]" value="1.00">Sausage</option>
        <option id="toppings[1]" value="1.00">Pepperoni</option>
        <option id="toppings[2]" value="1.00">Extra Cheese</option>
        <option id="toppings[3]" value="1.00">Onions</option>
        <option id="toppings[4]" value="1.00">Black Olives</option>
        <option id="toppings[5]" value="1.00">Anchovies</option>
        <option id="toppings[6]" value="1.00">Pineapple</option>
        <option id="toppings[7]" value="1.00">Canadian Bacon</option>
        <option id="toppings[8]" value="1.00">Ground Beef</option>
    </select>

下面的代码应该可以解决您的问题。粘贴到文档主体

  1. 首先你需要将ToppingsWanted()函数绑定到列表的onChange事件。这样当列表的状态改变时，你的函数就会被触发。

  2. 与其循环遍历列表元素，不如直接使用selectedIndex属性获取选中的元素。

  3. 我已将值更改为索引。现在，函数将从列表中获取值，该列表的索引为0-8，并将相应的索引值从浇头数组中推送到所选浇头数组中。

    <form name="pizzaForm">
    <select name="lstIngredients" size="9" multiple="multiple" onChange="ToppingsWanted()">
        <option id="toppings[0]" value="0">Sausage</option>
        <option id="toppings[1]" value="1">Pepperoni</option>
        <option id="toppings[2]" value="2">Extra Cheese</option>
        <option id="toppings[3]" value="3">Onions</option>
        <option id="toppings[4]" value="4">Black Olives</option>
        <option id="toppings[5]" value="5">Anchovies</option>
        <option id="toppings[6]" value="6">Pineapple</option>
        <option id="toppings[7]" value="7">Canadian Bacon</option>
        <option id="toppings[8]" value="8">Ground Beef</option>
    </select>   
</form>
<script type="text/javascript">
   var selectedToppings = [];
    var toppings = [ "Sausage" , "Pepperoni" , "Extra Cheese" , "Onions" ,"Black Olives" , "Anchovies" , "Pineapple" , "Canadian Bacon" , "Ground Beef" ];
    function ToppingsWanted()
    {
        var ingredients = document.pizzaForm.lstIngredients;
        var chosenOption = ingredients.options[ingredients.selectedIndex];
        selectedToppings.push(toppings[chosenOption.value]);
        alert(selectedToppings);
                        return selectedToppings
    }
</script>

一些注意事项。

  1. 这是相当多余的，你可以只是存储的值，你是存储在列表选项值本身的顶部数组。这样，如果配料改变了，你就不必更新两个东西了。

  2. 这段代码不会确保配料不会被添加两次。我可以做一个特别特别特别的奶酪披萨

相关文章：