課題【練習問題（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+'に変更しました');
}