I'm trying to learning the basics of JavaScript and i was practicing it by making a simple "shopping cart". Its one of my first works I did on JavaScript.
This is what needs to happen:
You need to select an option from the dropdown menu and give in a number (how much you want) in the "input field". That you submit with the button and it needs to show up in the table below with the following information: Name of the product, how much you want, and a subprice. I all got that working.
But these are my problems:
- First problem: When I select the same product and add it, it adds a new row in the table, and thats not what I want. I needs to count up with the same product you already orderd.
- Second problem: I don't know how to sum all the subtotals up to get a total price of all products. It needs to change on the go in the html document when you submit a product.
This is my code:
"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 + " - " + "\u20AC" + 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>