Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Uitdaging: DOM-Elementen Toevoegen en Verwijderen | DOM-Manipulatie voor Interactieve Webontwikkeling
Javascript Logica en Interactie

bookUitdaging: DOM-Elementen Toevoegen en Verwijderen

Taak

Je bouwt een winkelwagen waarin gebruikers items kunnen toevoegen en verwijderen.

  1. Voeg een item toe aan de winkelwagen:
    • Maak een nieuw <li>-element aan;
    • Maak een nieuw <button>-element aan;
    • Voeg het nieuwe <button>-element toe aan het nieuwe <li>-element;
    • Voeg het nieuwe <li>-element toe aan de <ul> met de ID cart-list.
  2. Verwijder een item uit de winkelwagen: Verwijder het specifieke <li>-element uit de <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Gebruik createElement om een nieuw <li>-element aan te maken;
  • Gebruik createElement om een nieuw <button>-element aan te maken;
  • Gebruik appendChild om het nieuwe <button>-element toe te voegen aan het <li>-element;
  • Gebruik appendChild om het nieuwe <li>-element toe te voegen aan de <ul> met de ID cart-list;
  • Gebruik removeChild om het specifieke <li>-element uit de <ul> te verwijderen.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 11

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you show me an example of how to add an item to the cart using JavaScript?

How do I remove a specific item from the cart?

Can you explain how the remove button should work for each cart item?

Awesome!

Completion rate improved to 2.22

bookUitdaging: DOM-Elementen Toevoegen en Verwijderen

Veeg om het menu te tonen

Taak

Je bouwt een winkelwagen waarin gebruikers items kunnen toevoegen en verwijderen.

  1. Voeg een item toe aan de winkelwagen:
    • Maak een nieuw <li>-element aan;
    • Maak een nieuw <button>-element aan;
    • Voeg het nieuwe <button>-element toe aan het nieuwe <li>-element;
    • Voeg het nieuwe <li>-element toe aan de <ul> met de ID cart-list.
  2. Verwijder een item uit de winkelwagen: Verwijder het specifieke <li>-element uit de <ul>.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Gebruik createElement om een nieuw <li>-element aan te maken;
  • Gebruik createElement om een nieuw <button>-element aan te maken;
  • Gebruik appendChild om het nieuwe <button>-element toe te voegen aan het <li>-element;
  • Gebruik appendChild om het nieuwe <li>-element toe te voegen aan de <ul> met de ID cart-list;
  • Gebruik removeChild om het specifieke <li>-element uit de <ul> te verwijderen.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 11
some-alt