JavaScriptHTML + CSS + JavaScript

12345678910

const plusButton = document.querySelector("#plus-button");
const quantityText = document.querySelector("#quantity-text");

let quantity = 1;

function addOne() {
  // TODO: Increase quantity, then update the text.
}

plusButton.addEventListener("click", addOne);

const plusButton = document.querySelector("#plus-button");
const quantityText = document.querySelector("#quantity-text");

let quantity = 1;

function addOne() {
  // TODO: Increase quantity, then update the text.
}

plusButton.addEventListener("click", addOne);

Draft saved locallyJavaScript · Spaces: 2

Live preview move your pointer inside

Mission 01 10 min

Reward+120 XP

Make the + Button Work

Online shops keep a quantity in JavaScript state, then update the page when it changes. This is the same variable idea you used in Basic JS, now connected to the DOM.

Your mission

Make the + button increase the quantity by 1 and update the visible quantity.

Increase quantity by 1 inside addOne().
Set quantityText.textContent to Quantity: followed by the current quantity.

Check quantity Run project