課題【練習問題（DOM操作/イベント操作）】ーNo.002

課題内容

  • ＜概要＞
  • 　文字を表示するタグ（labelタグ）を２つ準備しましょう。
  • 　初期表示として、　
  • 「直近１つ目：」「直近２つ目：」
  • 　とそれぞれ表示しましょう。
  • 　１つ目：「りんごに変更」という文字のボタン。
  • 　２つ目：「バナナに変更」という文字のボタン。
  • 　３つ目：「みかんに変更」という文字のボタン。
  • 　この３つのボタンを用意して、
  • 　それぞれのボタンが押された時に、
  • 　labelの文字を書き換えてみましょう。
  • 　ボタンが押された時の変更は、
  • 　１つ目が押された：最新（直近１つ目）を「りんご」に変更」
  • 　２つ目が押された：最新（直近１つ目）を「バナナ」に変更」
  • 　３つ目が押された：最新（直近１つ目）を「みかん」に変更」 　　
  • 　という変更をしてみましょう。
  • 　
  • 　ボタンが押されて最新の文字列を変更する時に、
  • 　先に直近１つ目の文字列を直近２つ目に移動しましょう。
  • 　
  • 　また、それぞれのボタンで文字を変更した時に、
  • 　コンソールにも、
  • 　「最新の文字をXXに変更しました」
  • 　（XXはりんご、バナナ、みかんのどれか）
  • 　という表示を行いましょう。

出力結果

初期表示として、

このような表示になるように、

HTMLで表示を作りましょう。

ボタンを押した時の表示の変更は、

以下のようになります。

ボタンを押した時

このボタンが押された時は、

例えば、

最初に「りんご」が選択されたときは、

このように表示され、

次に、「みかん」が選択されたときは、

このように、

直近の１つ目と２つ目が変更されます。

実際の動きを確認（サンプルの動き）

サンプルの動きとして、

課題のサンプル動作

ポイント（文字列の置換）

文字列を取得したり、置換するには、

DOM操作の中でも、

「textContent」

を使うことで、文字列を操作することができます。

この「textContent」に関しては、以下を参考にしてください。

文字列のを取得する、置換する

答え

HTML

<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample Dom/Event</title>
  </head>
  <body>
    <div>
      <label class="text-first">直近１つ目:</label>
      <label class="text-second">直近２つ目:</label>
    </div>
    <div>
      <button id="change-text1">りんごに変更</button>
      <button id="change-text2">バナナに変更</button>
      <button id="change-text3">みかんに変更</button>
    </div>
  </body>
  <script type="text/javascript" src="sample.js"></script>
</html>

javaScript

let sampleFirst = document.querySelector('.text-first');
let sampleSecond = document.querySelector('.text-second');
let sampleButton1 = document.querySelector('#change-text1');
let sampleButton2 = document.querySelector('#change-text2');
let sampleButton3 = document.querySelector('#change-text3');

const baseTextFirst = '直近１つ目；';
const baseTextSecond = '直近２つ目；';

let firstText = '';
let secondText = '';

sampleButton1.addEventListener('click',event => {
  moveFirstToSecond('りんご');
})

sampleButton2.addEventListener('click',event => {
  moveFirstToSecond('バナナ');
})

sampleButton3.addEventListener('click',event => {
  moveFirstToSecond('みかん');
})

function moveFirstToSecond(setFirstText) {
  // ２つ目の値を１つ目の値で上書き
  secondText = firstText;

  // １つ目の値を最新に書き換え
  firstText = setFirstText;

  // １つ目のラベルに表示
  sampleFirst.textContent = baseTextFirst + firstText;

  // ２つ目のラベルに表示
  sampleSecond.textContent = baseTextSecond + secondText;

  // コンソールに表示
  console.log('最新の文字を'+setFirstText+'に変更しました');
}