JavaScript 中的簡單購物車
[英]Simple shopping cart in JavaScript
問題描述
我正在嘗試學習 JavaScript 的基礎知識，我正在通過制作一個簡單的“購物車”來練習它。 它是我在 JavaScript 上所做的第一批作品之一。
這是需要發生的事情：
您需要從下拉菜單中選擇一個選項，並在“輸入字段”中輸入一個數字（您想要多少）。 您使用按鈕提交，它需要顯示在下表中，並提供以下信息：產品名稱、您想要的數量和子價格。 我都得到了那個工作。
但這些是我的問題：
- 第一個問題：當我選擇相同的產品並添加它時，它在表格中添加了一個新行，這不是我想要的。 我需要用你已經訂購的相同產品來計算。
- 第二個問題：我不知道如何將所有小計加起來以獲得所有產品的總價。 當您提交產品時，它需要在 html 文檔中隨時更改。
這是我的代碼：
"use strict"; //Lijst met info van groeten. const allGroenten = [ { naam: "Bloemkool", prijs: 1.15, eenheid: "stuk" }, { naam: "Chinese kool", prijs: 1.95, eenheid: "stuk" }, { naam: "Wortelen", prijs: 0.99, eenheid: "kg" } ]; //DROPDOWN MENU INVULLEN MET DE OBJECTEN VAN ALLGROENTEN const select = document.getElementById("groenten"); for (let i = 0; i < allGroenten.length; i++) { const opt = allGroenten[i].naam; const el = document.createElement("option"); el.text = opt + " - " + "\€" + allGroenten[i].prijs + " /" + allGroenten[i].eenheid; el.value = allGroenten[i].prijs; el.dataset.naam = allGroenten[i].naam; el.id = [i] select.add(el); } // EVENT .onClick op Toevoeg button document.getElementById("toevoegen").onclick = function() { invoerAub.innerText = ""; let aantalCheck = document.getElementById("aantal"); let check = aantalCheck.value; selecteerAub.innerText = ""; let selecteerCheck = document.getElementById("groenten"); let checkSelect = selecteerCheck.value; if (check == false) { const invoerAub = document.getElementById("invoerAub"); invoerAub.innerText = "Aantal ingeven aub."; } else if (checkSelect == false) { const invoerAub = document.getElementById("selecteerAub"); invoerAub.innerText = "Selecteer u groeten aub."; } else { const tbody = document.querySelector("tbody"); const tr = tbody.insertRow(); const naamTd = tr.insertCell(); const naamInput = document.getElementById("groenten"); naamTd.innerText = naamInput.options[naamInput.selectedIndex].text; const aantalTd = tr.insertCell(); const aantalInput = document.getElementById("aantal"); aantalTd.innerText = aantalInput.value; const subtotaalTd = tr.insertCell(); subtotaalTd.dataset.subPrijs = aantalInput.value * naamInput.value; let subtotaalInput = aantalInput.value * naamInput.value; subtotaalTd.innerText = subtotaalInput.toFixed(2); // naamInput.value = ""; // aantalInput.value = ""; // subtotaalInput = ""; } };
<!doctype html> <html lang="nl"> <head> <script src="javascript-test-2.js" defer></script> <title>Test</title> <link rel="icon" href="javascript.ico" type="image/x-icon"> <link rel="stylesheet" href="default.css"> </head> <body> <div id="container"> <!-- BESTEL FORMULIER --> <h2>Bestelformulier</h2> <label for="groenten">Kies u groenten</label> <!-- <span id="selecteerAub" style="color: red;"></span> --> <span id="selecteerAub" class="fout">Verplicht te kiezen.</span> <select name="groenten" id="groenten" class="required"> <option id="defaultOption" value="" disabled selected hidden>Kies hier...</option> </select> <span id="kiesGroente"></span> </br> <!-- <span id="invoerAub" style="color: red;"></span> --> <span id="invoerAub" class="fout">Verplicht een getal in te voeren.</span> <label>Aantal</label> <input id="aantal" type="number" min="1" required/> <button type="submit" id="toevoegen">Toevoegen in mijn mandje</button> </br> <!-- Shopping cart --> <div id="winkelmandje"> <h2>Winkelmandje</h2> <div> <p>Totaal:</p><span id="totaalBerekenen"></span> </div> </div> <table id="table"> <tr> <th>Naam</th> <th>Aantal</th> <th>Subtotaal</th> </tr> <!-- JS will insert here new TR --> </table> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 2020-01-16 18:44:13
要解決您的兩個問題，您需要決定用於保留數量和小計的數據類型。 有很多方法可以做到這一點。
下面，我只是為allGroenten數組中的每個對象添加了一個quantity和subtotal鍵。 您可以稍后重命名這些。
然后，當有人提交您的簡單表單時，我們將每次都從數據源重新生成整個tbody ，而不是向表中添加成功的行。 為了更好地實現這一點，我在 html 中添加並清空了tbody ，並將充滿標題的tr移動到了thead元素中。
然后每次有人點擊按鈕時，根據有效數據，我們獲取名稱和值，並僅更新相關對象的數量和小計。 當我們遍歷數組時，我們正在使用更新的數據重建表，最后我們更新總數。
請參閱下文並添加評論：
"use strict"; //Lijst met info van groeten. but add quantity and subtotal to persist data const allGroenten = [ { naam: "Bloemkool", prijs: 1.15, eenheid: "stuk", quantity: 0, subtotal: 0.0 }, { naam: "Chinese kool", prijs: 1.95, eenheid: "stuk", quantity: 0, subtotal: 0.0 }, { naam: "Wortelen", prijs: 0.99, eenheid: "kg", quantity: 0, subtotal: 0.0 } ]; // store currency to reuse const currency = "\€"; //DROPDOWN MENU INVULLEN MET DE OBJECTEN VAN ALLGROENTEN const select = document.getElementById("groenten"); for (let i = 0; i < allGroenten.length; i++) { const opt = allGroenten[i].naam; const el = document.createElement("option"); el.text = opt + " - " + currency + allGroenten[i].prijs + " /" + allGroenten[i].eenheid; el.value = allGroenten[i].prijs; el.dataset.naam = allGroenten[i].naam; el.id = [i] select.add(el); } // EVENT .onClick op Toevoeg button document.getElementById("toevoegen").onclick = function() { invoerAub.innerText = ""; let aantalCheck = document.getElementById("aantal"); let check = aantalCheck.value; selecteerAub.innerText = ""; let selecteerCheck = document.getElementById("groenten"); let checkSelect = selecteerCheck.value; if (check == false) { const invoerAub = document.getElementById("invoerAub"); invoerAub.innerText = "Aantal ingeven aub."; } else if (checkSelect == false) { const invoerAub = document.getElementById("selecteerAub"); invoerAub.innerText = "Selecteer u groeten aub."; } else { const naamInput = document.getElementById("groenten"); const naam = naamInput.options[naamInput.selectedIndex].text; const aantalInput = document.getElementById("aantal"); const addQuantity = aantalInput.value; // reset the tbody on each transaction const tbody = document.querySelector("tbody"); tbody.innerHTML = ''; // initialize totaal sum variable let totaal = 0.0; // updated quantity && subtotal and update DOM for (let i = 0; i < allGroenten.length; i++) { // update quantity and subtotal based on input if (naam.includes(allGroenten[i].naam)) { // ensure data type stays as Number allGroenten[i].quantity = +allGroenten[i].quantity + +addQuantity allGroenten[i].subtotal = allGroenten[i].quantity * allGroenten[i].prijs } // update subtotal and total for all const tr = tbody.insertRow(); const naamTd = tr.insertCell(); naamTd.innerText = allGroenten[i].naam; const aantalTd = tr.insertCell(); aantalTd.innerText = allGroenten[i].quantity; const subtotaalTd = tr.insertCell(); subtotaalTd.dataset.subPrijs = allGroenten[i].subtotal; subtotaalTd.innerText = allGroenten[i].subtotal.toFixed(2); totaal += allGroenten[i].subtotal } // show total const totaalBerekenen = document.getElementById("totaalBerekenen"); totaalBerekenen.innerText = currency + totaal.toFixed(2) } };
<div id="container"> <!-- BESTEL FORMULIER --> <h2>Bestelformulier</h2> <label for="groenten">Kies u groenten</label> <!-- <span id="selecteerAub" style="color: red;"></span> --> <span id="selecteerAub" class="fout">Verplicht te kiezen.</span> <select name="groenten" id="groenten" class="required"> <option id="defaultOption" value="" disabled selected hidden>Kies hier...</option> </select> <span id="kiesGroente"></span> <br/> <!-- <span id="invoerAub" style="color: red;"></span> --> <span id="invoerAub" class="fout">Verplicht een getal in te voeren.</span> <label>Aantal</label> <input id="aantal" type="number" min="1" required/> <button type="submit" id="toevoegen">Toevoegen in mijn mandje</button> <br/> <!-- Shopping cart --> <div id="winkelmandje"> <h2>Winkelmandje</h2> <div> <p>Totaal:</p><span id="totaalBerekenen"></span> </div> <br/> <table id="table"> <thead> <tr> <th>Naam</th> <th>Aantal</th> <th>Subtotaal</th> </tr> </thead> <tbody> <!-- JS will insert here new TR --> </tbody> </table> </div>
使用javascript顯示簡單的購物車（提價*數量）？
[英]Display simple shopping cart using javascript (pull up value * quantity)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.