【ステージ#1】 テキスト書き換えに関するプログラミング問題

《難易度★☆☆》innerHTMLを使ったHTMLの書き換えをテーマにした基礎的なスキルを試すプログラミング問題です。querySelectorを使った要素の取得や、ボタンを押すことで動作するようにイベントリスナーの理解も試せます。

問題

メッセージボックスとボタンAが表示されるHTMLとCSSがすでに用意されています。ここにJavaScriptを書き、以下の問題で指定された機能を追加してください。

  • 問題1-1:ボタンAを押すとメッセージボックスに「こんにちは!」と表示されるようにしなさい
  • 問題2-1:ボタンAを押すたびにメッセージボックスの文末に「!」が追加されていくようにしなさい
  • 問題3-1:ボタンAを押すと「いらっしゃいませ」「ありがとうございます」「またご利用ください」のいずれかのメッセージがランダムに表示されるようにしなさい

See the Pen ステージ#1問題 by programmingbird (@programmingbird) on CodePen.

問題1-1の解説と解答例

解説(発想のしかた)

① 【JSとHTMLの紐付け】扱う要素はメッセージボックスとボタンAなので、まず問題のHTML上で、それらのid(messageとa)を確認し、querySelectorで変数に入れとく。とりあえずそれぞれmsgとbtnAという名前にしておく。

//JSとHTMLの紐付け
var msg = document.querySelector("#message");
var btnA = document.querySelector("#a");

② 【トリガー】btnAに、addEventListenerでイベントリスナーをつけて、クリックしたら指定した関数を呼び出すようにする。関数の名前はとりあえずsayHelloで。

//「トリガー」の設定
btnA.addEventListener("click", sayHello);

③ 【アクション】関数sayHelloを用意して、その内容としてinnnerHTMLを使ってmsgの中身を書き換える処理を書く。【レッスン#2】 「HTML要素の書き換え」を学ぶプログラミング教材

//「アクション」の設定
function sayHello() {
  msg.innerHTML = "こんにちは!";
}

解答例

See the Pen ステージ#1問題1-1 by programmingbird (@programmingbird) on CodePen.

問題1-2の解説と解答例

解説(発想のしかた)

① 【JSとHTMLの紐付け】問題1-1と同じ。

② 【トリガー】これも基本的に問題1と同じ。アクションとして呼び出す関数名はaddMarkにしておく。

//「トリガー」の設定btnA.addEventListener("click", addMark);

③ 【アクション】addMarkの内容を書いていく。ここは問題1-1とちょっとだけ違う。単純にinnerHTMLを単純に上書きするんじゃなくて、msg(メッセージボックス)に今入ってる内容に「!」を付け足したい。これをかんたんに書ける演算子が+= というやつ(加算代入【レッスン#3】 「変数と演算の基本」を学ぶプログラミング教材 これは数値だけじゃなく文字列にも使える。

//「アクション」の設定
function addMark() {
  msg.innerHTML += "!";
}

解答例

See the Pen ステージ#1問題1-2 by programmingbird (@programmingbird) on CodePen.

問題1-3の解説と解答例

解説(発想のしかた)

① 【JSとHTMLの紐付け】【トリガーの設定】までは同じ。呼び出す関数はrandomMessageに。

//「トリガー」の設定
btnA.addEventListener("click", randomMessage);

② 3つのメッセージをランダムに…こういうときはメッセージを配列に入れておくといい。【レッスン#7】 「配列の使い方」を学ぶプログラミング

//配列の設定
var messages = [
  "いらっしゃいませ",
  "ありがとうございます",
  "またご利用ください"
];

③ 【アクション】これでmessages[★]みたいにして★に0,1,2のどれかを入れれば対応して「いらっしゃいませ」「ありがとうございます」「またご利用ください」が出てくるようになったから、Math.randomで乱数をつくって、3未満の整数(0,1,2のどれかになるように)にして…【レッスン#4】 「乱数の使い方」を学ぶプログラミング教材

//「アクション」の設定
function randomMessage() {
  var n = Math.floor(Math.random() * 3);
  msg.innerHTML = messages[n];
}

解答例

See the Pen ステージ#1問題1-3 by programmingbird (@programmingbird) on CodePen.