Learn JavaScript/

...

/

Make the Page Respond

Make the Page Respond

Learn how to access elements and change their content with JavaScript.

We'll cover the following...

Now that you’ve said hello to the browser, it’s time to make the web page respond to you.

You’ll learn how to select an element on the page and change its content—using only JavaScript.

Goals

You’ll learn to:

  • Use JavaScript to change what appears on the page.

  • Understand document.getElementById() and .innerText.

  • Start interacting with real HTML.

The setup

Press + to interact
Silent page vs. talking page
Silent page vs. talking page

Imagine you have this simple HTML:

Using JavaScript, you can change that message like this:

You just made the web page react to your code!

What’s happening here?

This code shows you how HTML and JavaScript work together:

  • HTML is the structure, like building blocks or labels on your page.

  • JavaScript is the action, it lets you change what’s on the page while it’s running.

Let’s break it down step by step:

  • document is the entire web page (the HTML page in the browser).

  • getElementById("message") finds the part of the page with the ID "message".

  • .innerText is the text that’s currently shown inside that element.

  • = assigns a new message.

Note: If you look back at the original HTML, it still says "Nothing yet...". But when the page runs your code, the browser updates what you see, without changing the original HTML code. JavaScript finds the message on the page and replaces it with a new one. It doesn’t touch the original HTML—just what the user sees in the browser.

Try it yourself

Change the message to something else:

Even though JavaScript will often guess correctly where a semicolon should go, there are edge cases where leaving them out can lead to confusing bugsIn programming, a bug is a mistake in your code that causes it to do something you didn’t expect. It could be: a typo or missing symbol, a wrong instruction, or even a tiny detail (like a missing semicolon) that confuses the computer. So always end your statements with a semicolon. It’s a simple habit that avoids tricky surprises later.

Try it again with a different sentence:

You’re modifying live content with code!

Mini challenge

What if your page had two elements like this?

HTML with two paragraphs to modify

Can you write JavaScript that changes both?

Changing multiple elements with JavaScript

Add your code in the widget below.

If you’re stuck, click the “Show Solution” button.

You’re now controlling multiple parts of the page.

What comes next?

Next up: perform calculations using code; we’ll turn the browser into a personal calculator!