EN

JavaScript・First steps

Rewrite the text on the page

Rewriting HTML text from JavaScript—this is where you first experience the moment "HTML and JS connect."

You’ve learned the box called a variable. But just putting something in a box doesn’t change the screen. Now, let’s rewrite HTML text from JavaScript and make a visible change happen. This is the first moment where “HTML and JavaScript connect.”

Put a name tag on the place you want to rewrite

First, on the HTML side, put an id (a name tag) on the place you want to say “I want to rewrite here.”

<h1 id="greeting">Hello</h1>

id="greeting" is like a nickname you gave this heading. It’s a marker for calling it up from JavaScript as “that one named greeting.”

Catch it, then rewrite it

Relying on that name tag, catch the place with JavaScript and swap its contents.

const el = document.getElementById("greeting");
el.textContent = "Hey there!";

Read out loud, it goes like this.

LineWhat it does
Line 1Catch the place with the name tag greeting, and put it in the box el
Line 2Rewrite that place’s textContent (the text shown) to “Hey there!”

With this, the “Hello” on the screen changes to “Hey there!” What you wrote appears as text on the screen—the variable you just learned comes to life here.

Words alone are hard to picture, so see the change for yourself. Press the button below to run the two lines of JavaScript above.

The HTML still says Hello the whole time. The text on the screen swaps anyway.

Summary of this lesson

  1. Put a name tag on the place you want to rewrite, using id
  2. Catch the place with getElementById
  3. Put text into textContent, and the text is rewritten

Try it: show the thank-you message

Let’s actually put the thanksMessage you tucked away last time onto the screen. Shima’s page still has an empty <p id="thanks"></p> inside its <form>. Catch this and put text in.

const thanksMessage = "Thanks for your message! It reached Shima.";

const thanks = document.getElementById("thanks");
thanks.textContent = thanksMessage;

thanksMessage stays as is; the two lines below are the newly added part. Catch the place with the name tag thanks, and write the contents of thanksMessage into it.

Browser view. Below the “Send” button of the contact form, green text reading “Thanks for your message! It reached Shima.” is displayed
The thank-you text now appears below the button.

But as it stands, the thank-you shows the moment you open the page. What you really want is for it to appear only “when the Send button is pressed,” right? We’ll fix that in the next lesson.

FAQ

Does rewritten text go back to the original when I reload the page?
Yes, it goes back. What JavaScript rewrites is only the contents of the screen you have open right now; the original HTML file doesn't change. Reload, and the same JavaScript runs again from the start.
What do I do when there are several places I want to rewrite?
Give each place an id, and call getElementById that many times. Think of it as one getElementById per id, and you'll be fine.
What's the difference between textContent and the similar innerHTML?
textContent rewrites only the text. innerHTML is a powerful mechanism that can rewrite the contents including tags, but it needs more care to handle, so get used to textContent first.