我怎樣才能像計算器一樣總結我的選擇？

Question

我正在制作一個菜單計算器，它可以為您提供所有產品，但我卡住了，因為我不知道從哪里開始，

我正在考慮使用 if else 語句並在每個按鈕上放置多個 id 並以某種方式計算總數但我認為效率非常低所以如果有人有更好的主意，那將是完美的

.! 哦，順便說一句！ 我正在使用 create-element 和 appendchild 生成按鈕元素。

這是我的代碼

///////////////////HTML/////////////////////////

<body>
    <div class="icons-container" id="container">

    </div>
    <div class="displayer">
        <p>price</p>
        <p>total</p>
    </div>
</body>
</html>

/////////////////Javascript/////////////////////////

nombres = ['Kg','Taco','Dorado','1LtCSM','1/2CSM','Boing','Cafe','Refresco'];
precios = [440,30,24,50,25,20,20,25];

Total = [];


const element = document.querySelector('.icons-container');

for(i=0;i<=7;i++){
    let div = document.createElement('div');
    let h3 = document.createElement('h3');
    
    
    div.classList.add('cuadro');
    div.appendChild(h3);
    h3.textContent = `${nombres[i]}`;
    h3.classList.add('icon-text');
    element.appendChild(div);
    
};

我什么都沒試過，但我想使用 if else 並在每個按鈕上添加不同的 id 來區分每個按鈕，

Answer 1

通過使用對象數組和.forEach()循環，我們以更簡單的方式解決了您的所有問題。

使用此解決方案，無需向每個按鈕添加class=""或id="" ，因為我們使用了一個稱為Closures的簡單概念https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Closures使.forEach()和 .addEventListener( .addEventListener()一起工作得很好！

 const menuData = [{ name: "Kg", price: 440, }, { name: "Taco", price: 30, }, { name: "Dorado", price: 24, }, { name: "1LtCSM", price: 50, }, { name: "1/2CSM", price: 25, }, { name: "Boing", price: 20, }, { name: "Cafe", price: 20, }, { name: "Refresco", price: 25, }, ]; generateGrid(menuData, document.querySelector(".icons-container")); function generateGrid(menuData, parent) { let total = 0; menuData.forEach((menuItem) => { const btn = document.createElement("button"); const h3 = document.createElement("h3"); btn.appendChild(h3); parent.appendChild(btn); h3.textContent = menuItem.name; const priceEl = document.getElementById("price"); const totalEl = document.getElementById("total"); btn.addEventListener("click", () => { total += menuItem.price; priceEl.textContent = menuItem.price; totalEl.textContent = total; }); }); }

 /* use your own css here, this is just for demo purposes */ body, .icons-container { gap: 0.5rem; }.icons-container, .displayer { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }.displayer>div { text-align: center; }.displayer div>div { font-size: 200%; font-weight: bold; }

 <div class="icons-container"> <!-- JS will put the divs here --> </div> <div class="displayer"> <div> <p>price</p> <div id="price">0</div> </div> <div> <p>total</p> <div id="total">0</div> </div> </div>

我怎樣才能像計算器一樣總結我的選擇？

問題描述

1 個解決方案

解決方案1
2 已采納 2022-11-22 20:17:42

我怎樣才能像計算器一樣總結我的選擇？

問題描述

1 個解決方案

解決方案1 2 已采納 2022-11-22 20:17:42

解決方案1
2 已采納 2022-11-22 20:17:42