YOUR MISSION
JAVASCRIPT / BRING THE PAGE TO LIFE
Make it click.
Build real interactions.
Turn JavaScript knowledge into buttons, forms, search tools and useful interfaces. Write the behavior, try the result, and understand the event behind it.
FROM ACTION TO INTERACTION
01 Find the element 02 Listen for an event 03 Update the state 04 Render the result 05 Test the next action
Small behaviors. Useful interfaces.
A real browser practice space. Your code runs in a sandboxed preview with external resources blocked. Use small examples: DOM code runs on a browser thread, so an infinite loop can freeze the tab. These checks demonstrate selected behaviors, not complete accessibility or security certification.
Run your draft to see it here.
Try the interface
Each run starts fresh. Editing clears old results. Native form navigation and external resources are blocked. Downloaded examples preserve the same resource policy.
FOLLOW A REAL CLICK
Where does the event go?
The listeners below are attached to three nested elements. Click the inner button to see capture, target and bubble listeners in order. The log shows only these three elements, not every ancestor in the page.
Outer container
Inner container
Click the inner button or focus it and press Enter.
element.addEventListener('click', handler, {capture: true});
element.addEventListener('click', handler);
// target: where the click started
// currentTarget: where this listener is registeredstopPropagation stops travel to later ancestors; it does not cancel a default action or other listeners on the same element. preventDefault is a separate operation. This explorer uses stopPropagation at the target’s bubble listener.
Build interactions people can use.
A practical checklist
- Use native buttons, labels, forms and inputs.
- Select the smallest useful part of the document.
- Keep state and displayed text consistent.
- Handle empty, repeated and unexpected input.
- Insert user text with textContent.
- Try keyboard navigation and visible focus.
- Explain errors in text and review live announcements.
- Test the whole interaction, not just the first click.
Keep your learning
Drafts, notes and passes save in this browser when storage is available. Editing a draft removes its pass. Previews and event traces are temporary. Download a backup before moving devices or clearing browser data.
Common questions
Why does my selector return null?
Check the selector spelling, whether the element is in this document, and whether your script ran before it existed. This lab runs after the fixture markup; a production page may need defer or DOMContentLoaded.
Why did my handler run immediately?
addEventListener('click', handler()) calls handler during setup. Pass the function itself: addEventListener('click', handler). Use an arrow wrapper when you need arguments.
Why does a new list item ignore clicks?
Listeners attached to existing children do not automatically attach to new ones. Register a listener while creating each item, or use event delegation on a stable ancestor.
Does passing the checks mean my interface is finished?
No. These checks cover the described fixture actions. Review keyboard use, focus, screen-reader announcements, responsive layout, errors and actual user tasks before shipping.
Why do events fire twice?
Check whether setup registered multiple handlers, whether both a child and its ancestor listen for the same bubbling event, or whether a form is handled in both click and submit callbacks.