Use the once option so the count never goes past 1.
Acceptance criteria
- 1.#out should show 1.
JavaScript Tutorial · JavaScript Events
These 10 tasks go with the JavaScript addEventListener chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “addEventListener attaches a handler to an element and can control how it runs.” .
1.Run a listener onceexercise · easy · 10 min
Use the once option so the count never goes past 1.
Passes when: #out should show 1.
2.Attach to every buttonexercise · easy · 10 min · practice plan
Loop over the buttons so any of them increases the count.
Passes when: #out should show 1.
3.Share one handlerexercise · easy · 10 min · practice plan
Attach the same named function to both buttons.
Passes when: #out should show shared.
4.Add two listenersexercise · easy · 10 min · practice plan
Attach two listeners so the count reaches 2 on one click.
Passes when: #out should show 2.
5.Listen for a double clickexercise · medium · 10 min · practice plan
Report Double when the button is double clicked.
Passes when: #out should show Double.
6.Fix the missing once optionbug fix · easy · 8 min
The listener should stop after the first click.
Passes when: Clicking three times should still make #out show 1.
7.Fix the listener attached to a listbug fix · easy · 8 min · practice plan
A NodeList has no addEventListener; each element needs its own.
Passes when: Clicking a button should make #out show 1.
8.Fix only the first button handledbug fix · easy · 8 min · practice plan
querySelector attaches to one button, so the second does nothing.
Passes when: Clicking the second button should make #out show handled.
9.Fix the duplicate named handlerbug fix · easy · 8 min · practice plan
Adding the same named function twice only counts once.
Passes when: Clicking once should make #out show 2.
10.Fix once used where it should not bebug fix · easy · 8 min · practice plan
The count should keep rising on every click.
Passes when: Clicking three times should make #out show 3.
Between them these tasks cover addEventListener, once option and Multiple listeners.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.