在Javascript中，如何从下拉列表和表单汇总数组中的所有值？

我正在尝试创建一个在线订购菜单，当用户单击“添加配菜”按钮时，它将显示添加在无序列表中的配菜名称，但同时，我想将成本（定义在值中）添加到一个数组中，在该数组中我可以稍后单击“计算”添加所选主菜的成本，以及所有添加的配菜的成本，以获得订单的总额

我尝试将配菜的成本添加到一个数组中，然后将其转换为字符串，然后将主菜成本和配菜成本加在一起，但我没有任何运气

HTML

选择你的配菜

配菜

当前配菜



计算成本
总成本：

JavaScript

let main = document.getElementById("mainDish");
let side = document.getElementById("sideDish");
let ul = document.getElementById("list");
let li = document.createElement("li");
let rice = document.getElementById("rice");
let naan = document.getElementById("naan");
let sideDishes = [];

function addSideDish(){
    let sideValue = side.value;
    sideDishes.push(sideValue);
    document.getElementById("list").innerHTML += "<li>"+sideDishes[sideDishes.length-1]+"</li>";
}

function removeSideDish(){
    
}

function calculate(){
    let sideValue = side.value;
    let sum;
    sideDishes.forEach(function(entry) {
        sideDishes.push(entry);
        console.log(entry);
        console.log(sideDishes);
    let mainValue = main.value;
    let sideString = parseFloat(sideDishes);
    let mainString = parseFloat(mainValue);
    let entryString = parseFloat(entry);
    let add = entryString + mainString;
    document.getElementById("totalCost").innerHTML = add;
    }); 
}
document.getElementById("addSideDish").onclick = addSideDish;
document.getElementById("removeSideDish").onclick = removeSideDish;
document.getElementById("total").onclick = calculate;

let main=document.getElementById（“mainDish”）；
let side=document.getElementById（“侧盘”）；
设ul=document.getElementById（“列表”）；
设li=document.createElement（“li”）；
让rice=document.getElementById（“rice”）；
设naan=document.getElementById（“naan”）；
让副菜=[]；
函数addSideDish（）{
设sideValue=side.value；
侧盘。推（侧值）；
document.getElementById（“list”）.innerHTML++=“
”+侧盘[sidedisks.length-1]+”
”；
}
函数removeSideDish（）{
}
函数计算（）{
设sideValue=side.value；
让我们总结一下；
餐具。forEach（函数（条目）{
餐具。推（进）；
控制台日志（条目）；
console.log（配菜）；
让mainValue=main.value；
让sideString=parseFloat（餐具）；
让mainString=parseFloat（mainValue）；
让entryString=parseFloat（条目）；
让add=entryString+mainString；
document.getElementById（“totalCost”）.innerHTML=add；
}); 
}
document.getElementById（“addSideDish”）.onclick=addSideDish；
document.getElementById（“removeSideDish”）.onclick=removeSideDish；
document.getElementById（“总计”）.onclick=calculate；

---

您的代码中几乎没有问题

我现在将集中讨论主要问题——计算函数-

您正在迭代条目，并将它们添加到循环中，并在循环中替换innerHTML的值

您应该汇总所有值和主菜，并在循环之外更新html：

function calculate(){
    let sideValue = side.value;
    let sum = 0/1; //just so sum will be int.
    sideDishes.forEach(function(entry) {
        sum+=parseFloat(entry)
    });
    let mainValue = parseFloat(main.value);

    let add = sum + mainValue;
    document.getElementById("totalCost").innerHTML = add;
}

---

当你说你运气不好时，你这是什么意思？当你运行它时发生了什么？@Nunchucks当我运行代码时，它将返回我的主菜成本+我刚才添加的配菜的最新值，而不是所有的。假设我加了木瓜（2）和萨莫萨（5），再加上主菜羊肉（15），它会返回20。我想让它返回22。

function calculate(){
    let sideValue = side.value;
    let sum = 0/1; //just so sum will be int.
    sideDishes.forEach(function(entry) {
        sum+=parseFloat(entry)
    });
    let mainValue = parseFloat(main.value);

    let add = sum + mainValue;
    document.getElementById("totalCost").innerHTML = add;
}