Three technologies, three jobs
HTML describes the content and structure of a document: its heading, paragraph and button. A button is a real control that people can reach with a keyboard. CSS chooses how those elements look, including spacing, colours and focus styling. JavaScript responds to events and can change the document after it loads.
These jobs cooperate but are not interchangeable. CSS cannot make this example change the paragraph text on a click, and JavaScript does not need to replace the HTML button just to listen to it. A basic document remains understandable before JavaScript runs.
Save and try the complete page
Copy the whole example below into a plain-text file named index.html, save it, then open that file in a modern browser. Click “Change message”, or focus the button with Tab and press Enter or Space. The paragraph should change from “Before the click.” to “You clicked the button!”. No Node.js installation is needed for this local example.
Keep the style and script inside this one file while learning. A larger site often moves them into separate .css and .js files, but the roles remain the same.
Save as index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Three web technologies</title>
<style>
body { font: 1rem/1.5 system-ui, sans-serif; padding: 2rem; }
button { background: #245bc2; color: white; border: 0;
border-radius: .4rem; padding: .65rem 1rem; cursor: pointer; }
button:focus-visible { outline: 3px solid #163e86; outline-offset: 3px; }
</style>
</head>
<body>
<h1>Change a message</h1>
<p id="message" aria-live="polite">Before the click.</p>
<button id="change-message" type="button">Change message</button>
<script>
const button = document.querySelector("#change-message");
const message = document.querySelector("#message");
button.addEventListener("click", () => {
message.textContent = "You clicked the button!";
});
</script>
</body>
</html>What the HTML does
The h1 gives the page a heading. The p element holds the message; its id lets JavaScript find that exact element. The button element gives visitors a native clickable control, and type="button" says it is an action button rather than a form submitter.
aria-live="polite" asks assistive technology to announce the message when it changes without interrupting the user. The script is placed after the button and paragraph so those elements exist when querySelector runs.
What the CSS does
The style rules use selectors to choose elements. The body rule sets a readable font and spacing. The button rule changes its background, text colour, padding and border. The focus-visible rule draws a clear outline when keyboard focus is visible.
The page still has its heading, message and working button if the CSS is removed; it simply looks different. Styling is not the same as changing the message content.
What the JavaScript does
document.querySelector finds the button and paragraph by their ids. addEventListener registers a function for the button’s click event. The function does not run at page load; it runs when the button is activated. It assigns new textContent to the paragraph, so the browser updates what is displayed.
If the ids in the HTML and selectors do not match, querySelector returns null and the listener cannot be attached. If you move the script into the head without deferring it, the elements may not exist yet when the code runs. For a separate script file, use the defer attribute or another reliable way to wait until the DOM is ready.
Make one change and check it
Change the button label in HTML, change its colour in CSS, then change the final message in JavaScript. Reload after each edit to see which layer changed. This gives you a simple way to debug: inspect the page structure, then its style, then the event behaviour.
Syntax
button.addEventListener("click", () => { message.textContent = "You clicked the button!"; });Examples
Change text on a click
This interactive JavaScript-only version creates its button and paragraph because the JavaScript preview starts without your index.html. Click the button after running it.
const message = document.createElement("p");
message.textContent = "Before the click.";
const button = document.createElement("button");
button.type = "button";
button.textContent = "Change message";
document.body.append(message, button);
button.addEventListener("click", () => {
message.textContent = "You clicked the button!";
});- The full index.html above shows the usual division of work. This preview has no copy of that HTML, so JavaScript first creates a paragraph and a button and appends them to the preview document.
- The click listener waits for the visitor to activate the button. It changes only the paragraph’s textContent, leaving the button in place.
- Run the example, click the button and look for the changed text below the preview’s console heading. For your own web page, save the complete HTML example and open it in a browser.
Best practices
- Use semantic HTML elements such as button for interactive controls.
- Keep visible focus styling for keyboard users.
- Match selector ids to the HTML and load scripts after the elements or with defer.
- Try the complete page in a browser; a Node process does not provide a document object.
Runtime & versions
Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.
ECMAScript specification