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.