A paper form just sits there, but a vending machine lights up and reacts when you press a button. JavaScript is what makes a web page a vending machine — responding to clicks and typing so the page does something instead of just showing.
The third layer of the web
HTML gives a page structure and CSS gives it style; JavaScript gives it behavior. Running in the browser, JavaScript can read and change the page's elements (the DOM) and react to events like clicks, so the page responds without reloading.
A common pattern: grab an element (e.g. document.querySelector), then attach an event listener that runs code when the user interacts — like updating text on a button click.
button.addEventListener('click', () => { count++; label.textContent = count; }); — the number updates each click.- You have a button and a paragraph on the page.
- Decide what to select and which event to listen for.
- Describe what runs when the button is clicked.
What you should see: Select the button, add a 'click' listener, and in its callback update the paragraph's text — the page changes live, no reload.