DOM Manipulation

Click Events

Click Events

An event listener stores behaviour for later. The browser calls your callback when the event happens, so the DOM should stay unchanged until the click occurs.

That timing is the point of event-driven code. If you call the handler while registering it, the page changes during setup and nothing is left for the actual interaction.

Your task: Select the save button and status message. When the button is clicked, update the status text to show that the draft is saved.

Free with a JS Exercises account

Sign in to start coding, run your solution, and keep your progress saved for later. No payment needed.

By continuing, you agree to our Terms and Privacy Policy. We'll send occasional product updates and news. You can unsubscribe anytime.

Click Events

An event listener stores behaviour for later. The browser calls your callback when the event happens, so the DOM should stay unchanged until the click occurs.

That timing is the point of event-driven code. If you call the handler while registering it, the page changes during setup and nothing is left for the actual interaction.

Your task: Select the save button and status message. When the button is clicked, update the status text to show that the draft is saved.

Free with a JS Exercises account

Sign in to start coding, run your solution, and keep your progress saved for later. No payment needed.

By continuing, you agree to our Terms and Privacy Policy. We'll send occasional product updates and news. You can unsubscribe anytime.

Console

Run code to see output.