JAVASCRIPT / INTERACTIVE PRACTICE
Build a click counter
Make a button do something. Practice click events with one small number.
Requirements
- Start at zero each time you run the code.
- Increase it by exactly one each time Add 1 is clicked.
- Make Reset return it to zero. Counting should still work afterward.
- Repeated Reset clicks must keep the number at zero.
Try this sequence: Add 1 three times → 3; Reset → 0; Add 1 → 1; Reset twice → 0. Check solution tests this sequence in a fresh preview. Your earlier manual clicks do not affect the check.
Related lessons
- Variables and values — keep a number between clicks.
- Functions — describe the work a callback performs.
- Working with the DOM — find elements and update their text.
- Click events — run a callback when a button is pressed.
Before you code
document.querySelector finds an element. A selector such as #add refers to its HTML id. addEventListener attaches a function that runs when an event happens. textContent reads or changes the text inside an element.
Here is the supplied HTML. You only need to write JavaScript.
<output id="count">0</output>
<button id="add">Add 1</button>
<button id="reset">Reset</button>A listener looks like this. The arrow function contains the work that happens after a click:
button.addEventListener("click", () => {
// Do something when the button is clicked.
});New to click events? Read the click-events lesson first.
Use the JavaScript editor below. HTML and styling are supplied. This practice supports document.querySelector for the three IDs, textContent, and click listeners. Run code applies your edits and starts a fresh counter.
Try the working counter
Click Add 1 several times, Reset, then Add 1 again. Notice that the next count is 1. Try Reset twice too. This reference runs independently of your code and does not mark the practice complete.
Expected sequence: 0 → 1 → 2 → 3 → Reset → 0 → Add 1 → 1. Use Reset whenever you want to start this reference again.
- Tab / Shift+Tab: indent / outdent.
- Escape, then Tab or Shift+Tab: leave the editor.
- Enter: keep indentation.
Drag the divider, or focus it and use arrow keys to resize. Enter restores an even split.
Up to 10,000 characters per editor.
Run your code, then try the preview here.
Includes your current work as HTML, CSS, and JavaScript files. How to run it on your computer →
Reset your code
This replaces your draft with the starter code. Your completed achievement stays saved.
Open one hint, try a change, then run your code before opening the next. The full answer is in the separate explained solution.
Hint 1: observe the behavior
Try two clicks in the reference. What must be remembered between them? Compare the number before a click with the number afterward.
Hint 2: react to a click
An event listener waits for an action. Put the work that should happen later inside its callback function.
Hint 3: keep the value and display in sync
Changing a variable does not change the page automatically. After updating the number, think about how the display gets its new text.
Hint 4: reset both parts
Reset must update the value you will use on the next click as well as what the user sees now.
See the explained solution
const countDisplay = document.querySelector("#count");
const addButton = document.querySelector("#add");
const resetButton = document.querySelector("#reset");
let count = 0;
addButton.addEventListener("click", () => {
count = count + 1;
countDisplay.textContent = count;
});
resetButton.addEventListener("click", () => {
count = 0;
countDisplay.textContent = count;
});Each listener runs when its button is clicked. The Add 1 listener changes the shared count variable and then updates textContent. Reset changes both back to zero. Replace the starter JavaScript, then run the checks; opening this solution does not mark the practice complete.