Skip to main content
Choorai
KO EN

HTML · CSS · JavaScript

Make a button change a message

A short, hands-on lesson in real HTML, CSS, and JavaScript. Edit each file, run it in the isolated preview, and check what you actually observe.

A different kind of lesson

This lesson runs your HTML, CSS, and JavaScript in a sandboxed iframe. It is separate from the Choorai Steps memo practice, which uses a small educational rule language rather than JavaScript.

1. Start with the three files

Edit the real code below. HTML describes the button and message; CSS styles them; JavaScript connects a click to a text change.

The HTML button and the JavaScript selector intentionally use different IDs. Preview the starter, then use the hint to repair the selector.

Sandboxed preview

This preview accepts only a small HTML and JavaScript subset, parses it, and rebuilds a normalized page. It is not a safe sandbox for arbitrary JavaScript. Links, forms, scripts outside the supported click handler, frames, embedded resources, navigation, and network APIs are unsupported. The rebuilt page runs in an opaque-origin iframe with sandbox="allow-scripts" only and a restrictive Content Security Policy; it cannot access this page’s DOM or storage and sends no messages to the page.

Run the preview to see your page here.

Start this lesson over?

This clears the saved HTML, CSS, JavaScript draft and lesson progress in this browser. Previewing and checking will not remove its one-time undo. Editing, using Undo, or confirming another reset ends or replaces it.

Last updated: October 7, 2026 · Version: v0.0.1

Send Feedback

Opens a new issue page with your message.

Open GitHub Issue