Reacting to clicks — your first interactive app
A page that responds to you
Here is the best part: making things happen when the user does something — like clicking a button. We listen for an action using addEventListener.
How do I run code on a click?
<button id="btn">Click me</button>
<p id="count">0</p>
let btn = document.querySelector("#btn");
let count = document.querySelector("#count");
let clicks = 0;
btn.addEventListener("click", () => {
clicks = clicks + 1;
count.textContent = clicks;
});
Read it plainly: "when the button is clicked, run this function." Every click adds 1 and updates the number on the page. You just built a working click counter!
What is happening, step by step?
- We find the button and the number on the page.
- We keep a variable
clicksto remember the count. addEventListener("click", ...)says "watch this button for clicks".- Each click runs the arrow function, which updates the count.
Notice how everything you have learned now comes together — a variable, an arrow function, the DOM, and an event. This is real JavaScript.
Where do you go from here?
You now know the whole foundation:
- print and run code,
- variables and data types,
- decisions and loops,
- functions,
- arrays and objects,
- and changing the page with events.
Pick a tiny project — a to-do list, a tip calculator, a small quiz — and build it. You learn the most by making something real. And when you feel ready, take the JavaScript test on this platform to verify your skill and earn a certificate.
Big idea: listen for an event, then change the DOM. That single pattern powers almost every interactive website in the world.