JavaScript・はじめの一歩

ページの文字をかきかえる

JavaScriptからHTMLの文字を書きかえる——ここで初めて「HTMLとJSがつながる」瞬間を体験します。

変数という箱を覚えました。でも箱に入れただけでは、画面は何も変わりません。いよいよ、JavaScriptからHTMLの文字を書きかえて、目に見える変化を起こしてみましょう。ここが「HTMLとJavaScriptがつながる」最初の瞬間です。

書きかえたい場所に名札をつける

まず、HTML側で「ここを書きかえたい」という場所に、id（アイディー）という名札をつけます。

<h1 id="greeting">こんにちは</h1>

id="greeting" は、この見出しにつけたあだ名のようなもの。JavaScriptから「greetingって名前のあの子」と呼び出すための目印です。

つかまえて、書きかえる

その名札をたよりに、JavaScriptで場所をつかまえ、中身を入れかえます。

let el = document.getElementById("greeting");
el.textContent = "やっほー！";

読み下すと、こうです。

行していること
1行目greeting という名札の場所をつかまえて、箱 el に入れる
2行目その場所の textContent（表示される文字）を「やっほー！」に書きかえる

これで、画面の「こんにちは」が「やっほー！」に変わります。書いたことが、画面の文字として現れる——さっき覚えた変数が、ここで生きてきます。

このレッスンのまとめ

  1. 書きかえたい場所には id で名札をつける
  2. getElementById で場所をつかまえる
  3. textContent に入れれば、文字が書きかわる

ただし今のままだと、ページを開いた瞬間からお礼が出てしまいます。本当は「おくるボタンを押したとき」だけ出したいですよね。次のレッスンで、そこを直します。 :::

やってみよう：お礼のメッセージを表示する

前回しまっておいたthanksMessageを、実際に画面へ出してみましょう。しまちゃんのページの<form>には、まだ空っぽの<p id="thanks"></p>がありました。これをつかまえて、文字を入れます。

const thanksMessage = "おたより ありがとう！ しまちゃんに とどきました。";

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

thanksMessageはそのまま、下の2行が新しく足した部分。thanksという名札の場所をつかまえて、そこにthanksMessageの中身を書きこみます。

ブラウザ表示。れんらくフォームの「おくる」ボタンの下に「おたより ありがとう！ しまちゃんに とどきました。」という緑色の文字が表示されている
ボタンの下に、お礼の文字が表示されました。