Events & State

A program that runs once can produce a report. An interactive page also responds later, when a person clicks, types, or submits a form. Those actions create events. addEventListener("click", callback) registers a function to run for each click. Pass the function itself; writing callback() would call it immediately instead.

Keep state, the application’s current data, separate from rendering, the code that displays it. For a counter: state is a number; an event changes the number; render writes the number to textContent. Do not use the visible label as the only storage for the count.

Use an actual button, not a clickable paragraph. Buttons support keyboard activation automatically. Give the output an aria-live attribute so assistive technology can announce updates. These small choices make the same interaction available to more people.

Read the button and listener together

In the lab, <button id="add" type="button">Add 5 minutes</button> creates a button. Its id lets the script find it; type=button gives it a plain action rather than form submission.

The script defines addFive, then registers it with document.querySelector("#add").addEventListener("click", addFive). The browser keeps that function and calls it later for each click. The final render() at the bottom runs immediately to show the initial zero. That gives three separate jobs: find the button, register the future action, and display the starting state.

aria-live="polite" is an HTML attribute on the output paragraph. It asks screen readers to announce changed text when they can do so without interrupting the user.

Predict before running

The console example models two clicks by calling a function twice. In the webpage lab below, the browser calls the handler in response to the real button. What is the final value?

let minutes = 0;

function addFive() {
  minutes = minutes + 5;
}

addFive();
addFive();
console.log(minutes);

10

State changes first, display follows

A click is an event: the browser calls your listener when it happens. Pass a function to addEventListener; do not call it while registering. Keep a number as state and render it after every change. If you only change visible text, later code may still read an old state value. Predict three clicks and one reset before trying the browser lab.

let count = 0;

function increment() {
  count += 1;
}

function reset() {
  count = 0;
}

increment();
increment();
reset();
increment();
console.log(count);

1

Your turn

let minutes = 20;
// Define reset, call it, then print minutes.

let minutes = 20;

function reset() {
  minutes = 0;
}

reset();
console.log(minutes);

0

What you should be able to explain

• When does a registered listener execute?
• What is the source of truth for the count?
• Why should reset also update the display?

Try the webpage

Run the page and click Add 5 twice. Then add <button id="reset" type="button">Reset</button> beside the first button, outside the script tags. Inside the script, define reset to set minutes to zero and call render. Register it on the reset element with a click listener just as the lab registers addFive. Keep all JavaScript inside the script tags. Use Tab and Enter to try the buttons without a mouse.