課題【DOM操作】ーNo.09

課題内容

  • ＜準備：HTML＞
  • 　divタグで「対象の文字列」という文字を設定しましょう。
  • 　このdivタグには、idとして、「target-id」をつけましょう。
  • 　
  • ＜準備：CSS＞
  • 　色をつけるためのクラスを用意しましょう。
  • 　文字列を赤色、背景を黄色：クラス「change-red」
  • 　文字列を青色、背景を黄色：クラス「change-blue」
  • 　文字列を緑色、背景を黄色：クラス「change-green」
  • 　
  • ＜処理：javaScript＞
  • 　javaScriptでは、
  • 　idの「target-id」を指定してDOM操作を行いましょう。
  • 　プロンプトから値を取得して、
  • 　文字列「赤」ならクラス「change-red」を追加
  • 　文字列「青」ならクラス「change-blue」を追加
  • 　文字列「緑」ならクラス「change-green」を追加
  • 　この「赤」「青」「緑」なら上記の処理を行いましょう。
  • 　文字列が上記の３つ以外なら、
  • 　divタグの文字列を「対象の文字列」から、
  • 　「指定の色はありませんでした。」に変更しましょう。
  • 　　

出力結果

まず、

このようなプロンプトを表示させましょう。

ここから文字列を取得して、

取得した文字列によって、

コンソールの表示も変わります。

「赤」「青」「緑」のいずれかの場合

「赤」「青」「緑」

のどれかが入力された場合は、

コンソールには、

以下のように表示するようにしましょう。

例として「赤」を入力した場合です。

（「青」「緑」の場合は、「赤」の部分が変わります）

----------------------
プロンプトから値を取得
----------------------
文字列「赤」が入力されました。

----------------------
文字列の色と背景色を変更
----------------------
文字列に「赤」のためのクラスを追加しました。

この表示が行われて、

実際の文字の色と背景色が、

うまくかわっていれば大丈夫です。

「赤」「青」「緑」以外の場合

「赤」「青」「緑」以外が、

プロンプトに入力された場合は、

コンソールには、

以下のように表示しましょう。

例えば、

コンソールから「テスト」が入力されたとき、

以下の表示になります。

----------------------
プロンプトから値を取得
----------------------
文字列「テスト」が入力されました。

----------------------
文字列の色と背景色を変更
----------------------
文字列が「テスト」のため、文字列を変更しました。

このように、

コンソールに表示され、

文字列の色や背景色の変更は行われず、

実際の文字列が、

「指定の色はありませんでした。」

に変更されていれば大丈夫です。

ポイント（DOM操作）

DOMの操作方法に関しては、

  • パターン１：対象のタグを指定する場合
  • パターン２：対象のクラスを指定する場合
  • パターン３：対象のIDを指定する場合

の３パターンがあります。

この３パターンのそれぞれの指定方法は、

以下の記事の一部を参考にしてください。

【基礎を抑える_05】「DOM操作」

ポイント（DOM操作でのクラスの追加）

DOMの操作として、

クラス名を追加する方法については、

以下のページを参考にしてください。

【DOM操作】クラスを追加する

ポイント（DOM操作での文字列の置換）

DOMの操作として、

文字列を置換する方法については、

以下のページを参考にしてください。

【DOM操作】文字列を取得する、置換する

答え

HTML

<html>
  <head>
    <meta charset="UTF-8">
    <!-- CSSファイル -->
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <!-- DOM操作 -->
    <div id="target-id">対象の文字列</div>
  </body>
  <script type="text/javascript" src="sample.js"></script>
</html>

CSS

/* 「赤」の設定用 */
.change-red {
  color: red;
  background-color: yellow;
}

/* 「青」の設定用 */
.change-blue {
  color: blue;
  background-color: yellow;
}

/* 「緑」の設定用 */
.change-green {
  color: green;
  background-color: yellow;
}

javaScript

// プロンプトから取得
console.log('----------------------');
console.log('プロンプトから値を取得');
console.log('----------------------');
let promptText = prompt('値を入力してください。');
console.log('文字列に「'+promptText+'」が入力されました。');

// コンソールに表示
console.log('----------------------');
console.log('文字列の色と背景色を変更');
console.log('----------------------');
setColorAndBackground(promptText);

function setColorAndBackground(checkString) {
  // DOMを取得する
  let sample = document.querySelector('#target-id');

  if(checkString === '赤') {
    // 取得したDOMにクラスを追加
    sample.classList.add('change-red');

    // コンソールに表示
    console.log('文字列に「'+checkString+'」のためのクラスを追加しました。');
  }
  else if(checkString === '青') {
    // 取得したDOMにクラスを追加
    sample.classList.add('change-blue');

    // コンソールに表示
    console.log('文字列に「'+checkString+'」のためのクラスを追加しました。');
  }
  else if(checkString === '緑') {
    // 取得したDOMにクラスを追加
    sample.classList.add('change-green');

    // コンソールに表示
    console.log('文字列に「'+checkString+'」のためのクラスを追加しました。');
  }
  else {
    // 取得したDOMにクラスを追加
    sample.textContent = '指定の色はありませんでした。';

    // コンソールに表示
    console.log('文字列が「'+checkString+'」のため、文字列を変更しました。');
  }
}