Opdracht 11: JavaScript Boodschappenlijst
HTML Javascript

Versie: 1.0
Doel: Rekenen met JavaScript, herhaling van variabelen objecten en functies in JavaScript, leren werken met Event Handlers, leren werken met JavaScript wiskundige operatoren (rekenen met JavaScript), leren werken met het selecteren, lezen en bijwerken van HTML elementen vanuit JavaScript.

Je gaat bij deze opdracht weer verder met de boodschappenlijst. Open weer de map boodschappenlijst in Visual Studio Code. Vergeet niet regelmatig je werk te committen in GIT. Aan het eind van deze opdracht is het de bedoeling dat met de knoppen in de tabel de subtotalen en totalen van je boodschappenlijst worden berekend.

Deel 1: Event handlers

  1. Voeg event handlers voor ieder product aantal invoerveld toe. Om te testen of de event handler werkt kun je onderstaande regel code in deze event handler zetten en een productaantal wijzigen en daarna in je console van je webbrowser kijken om te controleren of de event handler uitgevoerd wordt zodra je een product aantal verandert: console.log(‘aantal producten is gewijzigd’);
  2. Nu moet je er voor zorgen dat zodra de eventhandler aangeroepen wordt de subtotalen uitgerekend en bijgewerkt worden in de table. Voeg code toe aan de eventhandler die de subtotalen uitrekent a.d.h.v. product aantal en productprijs. Omdat er meerdere producten in je boodschappenlijst kunnen staan kun je deze als array opvragen met de volgende JavaScript code: document.getElementsByClassName(‘productPrice’); Deze code haalt alle elementen waar de productprijzen in staan op. Dit principeĀ  kun je ook gebruiken voor het ophalen van productaantallen en subtotalen.

Deel 2: Rekenen

  1. Door gebruik te maken van een for-loop kun je tegelijk door deze arrays van productprijzen, aantallen en subtotalen itereren en de subtotalen bijwerken. (subtotaal = productprijs * product aantal). Hierdoor wordt je code dynamisch: stel je voegt op een later moment een nieuw product toe, dan neemt je for-loop deze automatisch in de berekening voor subtotalen mee.
  2. Test de code uit de vorige stap door een product aantal te veranderen en controleer of de subtotalen ook automatisch bijgewerkt worden. Pas je code aan waar nodig.
  3. Nu moet naast de subtotalen ook de totale prijs van alle boodschappen bij elkaar opgeteld in de table bijgewerkt worden zodra de gebruiker een product aantal wijzigt. Je kunt hier van dezelfde eventhandler en for-loop gebruikmaken als in de vorige stappen. Als de totaalprijs is berekend kun je deze bijwerken in het juiste element.
  4. Test je programma opnieuw en controleer of de totaalprijs correct wordt berekend en weergegeven. Pas je code aan waar nodig.

Klaar? Vraag aan je ICT-begeleider of hij je werk wil reviewen en of je verder kunt met de volgende opdracht. Is je begeleider niet beschikbaar, start dan alvast met de volgende opdracht.