codex-lv2-may-2025

Level Navigation: 1

Current Level: 9

Level 9: Event Listeners

What You’ll Do

Add event listeners to your button and input using the onEvent helper function.

Instructions

Add an event listener to your button for the “click” event
Add an event listener to your input for the “input” event
Use onEvent(elementId, eventType, function) syntax

💡 Code Hints

Need help with event listeners? Check out these snippets:

Event handling: See SNIPPETS.md for onEvent examples
Anonymous functions: Use function() { } syntax for your event handlers

✅ Check

Open your webpage in a browser
Open Chrome DevTools (F12) and go to the Console tab
Click your button - you should see a message in the console
Type in your input - you should see messages in the console as you type
If you don’t see messages, check that your event listeners are set up correctly

🔍 Optional: Diving Deeper - Named Functions

Instead of using anonymous functions, you can create named functions for your event handlers:

function clickHandler() {
    console.log("Button was clicked!");
    setText("output", "Hello from the button!");
}

// Use the named functions with onEvent
onEvent("my-button", "click", clickHandler);

Named functions make your code more readable and reusable, especially when you need to use the same handler for multiple elements.

🔍 Optional: Diving Deeper - Native addEventListener

You can also use the native DOM addEventListener method instead of the helper function:

function clickHandler() {
    console.log("Button was clicked!");
    setText("output", "Hello from the button!");
}

// Use native addEventListener
document.getElementById("my-button").addEventListener("click", clickHandler);

This approach gives you direct access to the native DOM API and is the standard method used in professional JavaScript development.

Level Navigation: 1

Current Level: 9