JavaScript Simplified · One concept, one day, one project · Day 18 of 32

Event Listeners

Connecting several buttons to code and keeping track of a value as the user clicks. You build a counter that goes up and down.

By the end of today you can

Attach handlers to several elements with addEventListener
Keep a value in a variable and update the page when it changes
See how state (a value) and the DOM (the view) stay in step
Build a counter app

Yesterday one button, one reaction. Today several buttons that share a value: a counter you can raise and lower. This introduces an idea that runs through all of app development: a value in a variable (the state), and the page kept in step with it.

1. State and View

Definition

State is the data your app remembers right now, held in a variable, like the current count. The view is what the user sees on the page. The job of an event handler is usually to change the state, then update the view to match.

2. A Counter

A counter needs one value and two buttons. Each button changes the value, then redraws it.

What this code doesClicking plus twice raises the count to 2.

index.html

1
2
3

<button id="minus">-</button>
<span id="count">0</span>
<button id="plus">+</button>

style.css

1
2

span{font-size:24px;margin:0 16px;font-weight:bold}
button{font-size:20px;width:40px;height:40px;cursor:pointer}

app.js

let count = 0; // the state
const label = document.getElementById("count");

// show the current state on the page
function render() {
  label.textContent = count;
}

document.getElementById("plus").addEventListener("click", function () {
  count = count + 1; // change the state
  render();          // update the view
});
document.getElementById("minus").addEventListener("click", function () {
  count = count - 1;
  render();
});

BROWSERindex.html  ·  after clicking + twice

The picture shows the count at 2, after two clicks on +. Each click changes count (the state) and calls render (updates the view). Keeping those two in step is the core loop of every app you will build.

One render function, called after every change

Putting "update the page" in one render function, and calling it after every change, keeps the view honest. The alternative, setting the text in ten different places, drifts out of step. Change the state, then render.

Today’s Mini Project

🎮 Counter App

A counter with plus and minus, plus a reset button that sets it back to zero. One value, three buttons, one render function.

What this code doesReset returns the count to 0 after it was raised.

index.html

<div class="counter">
  <button id="down">-</button>
  <span id="n">0</span>
  <button id="up">+</button>
  <button id="reset">Reset</button>
</div>

style.css

1
2
3

.counter{display:flex;gap:10px;align-items:center}
#n{font-size:26px;font-weight:bold;min-width:30px;text-align:center}
button{font-size:16px;padding:6px 12px;cursor:pointer}

app.js

let count = 0;
const n = document.getElementById("n");
function render() { n.textContent = count; }

document.getElementById("up").addEventListener("click", function () { count++; render(); });
document.getElementById("down").addEventListener("click", function () { count--; render(); });
document.getElementById("reset").addEventListener("click", function () { count = 0; render(); });

BROWSERindex.html  ·  after +, +, +, then Reset

count++ is the shorthand for "add one" you met with loops. Three handlers change the one value; one render keeps the screen true.

Challenge (15 minutes)

Make the counter refuse to go below 0: in the minus handler, only lower the count when it is above 0. Expected: clicking minus at 0 does nothing.

Try This

Add a button that doubles the count each time it is clicked.

Expected: from 3, clicking "double" shows 6, then 12.

Picture This

A counter looks like a toy. But "hold a value, change it on an event, redraw the page" is exactly how a cart total, a like button, and a dashboard work. You just built the pattern the whole industry runs on.

Checkpoint

What is the difference between state and view?

State is the data your app holds right now (like count). The view is what the user sees. Handlers change the state, then update the view to match.

Why keep updating the page in one render function?

So the view is drawn from the state in one place. Calling render after every change keeps the screen in step with the data, instead of drifting.

What does count++ do?

It adds one to count. It is shorthand for count = count + 1, the same step you used in for loops.

Tick Before You Move On

☐ I can attach handlers to several elements
☐ I can keep a value in state and update it on clicks
☐ I can keep the view in step with the state using render
☐ I built the Counter App

Quick Recap

State is the data your app holds; the view is what the user sees. An event handler changes the state, then updates the view. One render function, called after every change, keeps them in step. This state-and-render loop is the core of real applications.

Next: Day 19. Buttons are one way in; forms are the main way users give you information. Tomorrow you handle a form properly.