ボタンで挨拶を出せ

初段 / 目安 15分

HTML と CSS で仕上げたハレノヒ珈琲のサイトを眺めながら、店長の陽葵さんが腕を組んでいます。「きれいになったのは嬉しいんだけど、なんだか静かなのよね」。しばらく考えて、こちらを見ました。「トップのボタンを押したら『いらっしゃいませ！』って出したいの。おもてなしでしょ?」

ここから先は JavaScript の間合いです。HTML と CSS はもう書きあがっていて、この道場では触りません。書き換えるのは script.js の中だけです。

画面にはすでに id="greet-btn" のボタンと、まだ空っぽの id="greeting" の段落が置いてあります。押されたら空っぽの段落に文字を入れる、それがこの一問でやることのすべてです。あわせて、挨拶が出ている状態だと分かるように shown クラスも付けてください。CSS 側には .greeting.shown の飾りが仕込んであるので、クラスを付けた瞬間に左の線が出ます。

完成条件

• #greet-btn が押されたとき、#greeting に「いらっしゃいませ」を含む文字が出る
• 同じタイミングで #greeting に shown クラスを付ける

進め方

ブラウザの JavaScript は、だいたい「取る・待つ・変える」の3拍子でできています。まず動かしたい要素を取り、次にその要素に「押されたら」という待ち伏せを仕掛け、押されたときに中身を変えます。

取るのは document.getElementById です。待ち伏せは addEventListener で、第1引数に待つ出来事の名前、第2引数に起きたときに走らせる関数を渡します。中身を変えるのは textContent への代入、クラスを足すのは classList.add です。

押しても何も起きないときは、たいてい id の綴りが違うか、待ち伏せを仕掛けた相手が違います。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. #greet-btn のクリックで #greeting に挨拶文を表示する
2. 挨拶文には「いらっしゃいませ」を含める
3. 同じクリックで #greeting に shown クラスを付ける