Lesson 5 of 8
An interactive counter
- 12 min
- 3 checks
- 3 hints
- Go to task
Goal
Listening for events and changing the page
Explanation
JavaScript changes the page after it has loaded, and working with it always comes down to three steps: you select an element, listen for an event on it such as a click, then change something on the page.
document.querySelector('#btn') selects the element, addEventListener('click', ...) listens for clicks, and the textContent property changes the text.
You'll also need a variable that keeps the count from one click to the next, so define it outside the listener function, or it will go back to zero on every click.
Your task
Make every click on the button increase the number by one.
Checks
3 checks- The count starts at 0
- One click increases the count by one
- Three clicks increase it by three