Attach then remove a handler, so clicking leaves the text alone.
Acceptance criteria
- 1.#out should show removed.
JavaScript Tutorial · JavaScript Events
These 10 tasks go with the JavaScript removeEventListener 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: “removeEventListener detaches a handler, but only if it can identify it.” .
1.Remove a listenerexercise · easy · 10 min
Attach then remove a handler, so clicking leaves the text alone.
Passes when: #out should show removed.
2.Store the handler firstexercise · easy · 10 min · practice plan
Keep the handler in a variable so it can be removed.
Passes when: #out should show removed.
3.Remove from inside the handlerexercise · easy · 10 min · practice plan
Make the handler take itself off so it only ever runs once.
Passes when: #out should show 1.
4.Use once insteadexercise · easy · 10 min · practice plan
Achieve the same single run with the once option.
Passes when: #out should show 1.
5.Stop counting on demandexercise · medium · 10 min · practice plan
The stop button should remove the counting handler.
Passes when: #out should show 2.
6.Fix the anonymous handler removalbug fix · easy · 8 min
Two identical-looking functions are still two different functions.
Passes when: Clicking should leave #out showing still waiting.
7.Fix the handler removed with bracketsbug fix · easy · 8 min · practice plan
removeEventListener needs the function, not its result.
Passes when: Clicking should leave #out showing still waiting.
8.Fix the mismatched capturing flagbug fix · easy · 8 min · practice plan
A capturing listener must be removed with capturing too.
Passes when: Clicking should leave #out showing still waiting.
9.Fix the wrong event name removedbug fix · easy · 8 min · practice plan
The name must match the one it was added with.
Passes when: Clicking should leave #out showing still waiting.
10.Fix the counter that never stopsbug fix · easy · 8 min · practice plan
The stop button is not removing the counting handler.
Passes when: Clicking count twice should make #out show 2.
Between them these tasks cover removeEventListener, Named handlers and once.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.