Build a Counter with JavaScript and addEventListener

Putting C1 together

You've seen variables, types, template literals, arrays. Time to wire them into something interactive.

A counter widget is the "hello world" of UI work:

1. A page element shows a number.
2. A "+" button increments it.
3. A "−" button decrements it.

Three pieces:

let count = 0;                                    // state
const out = document.getElementById("count");     // DOM reference
out.textContent = count;                          // initial render

document.getElementById("inc").addEventListener("click", () => {
  count += 1;
  out.textContent = count;
});

You'll see document.getElementById and addEventListener everywhere from here on. C2 covers them in depth — for now treat them as "find an element by id" and "run code when something happens."

The "render after change" rule

Every time count changes, you re-render. Forgetting to re-render is the #1 newbie bug: the value in memory updates, but the screen doesn't change because no one told the DOM. Re-rendering after every state change keeps you out of that trap.

This is the same idea React, Vue and Svelte automate for you. Here you do it by hand — and once you've done it ten times, the frameworks make a lot more sense.