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

課題内容

＜概要＞
　文字を表示するタグを準備しましょう。
　初期表示として、初期値(0)を、　
「値：0」
　と表示しましょう。
　これとは別に、３つのボタンを用意しましょう。
　１つ目：「リセット」という文字のボタン。
　２つ目：「１を減算」という文字のボタン。
　３つ目：「１を加算」という文字のボタン。
　この３つのボタンを用意して、
　それぞれのボタンが押された時に、
　labelの文字を書き換えてみましょう。
　ボタンが押された時の変更は、
　１つ目が押された：値をを「0」に変更
　２つ目が押された：現在の値から「1を減らす」
　３つ目が押された：現在の値から「1を増やす」　　
　という変更をしてみましょう。
　
　また、それぞれのボタンで文字を変更した時に、
　コンソールにも、
　「最新の値をXXに変更しました」
　（XXは最新の値を表示）
　という表示を行いましょう。

出力結果

初期表示として、

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

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

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

以下のようになります。

ボタンを押した時

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

例えば、

最初に「1を減算」が押された時は、

このように、

値が、「0」から「1を減らす」という計算が行われ、

結果として「-1」が表示されます。

「1を減算」と「1を加算」は、

１を引く、１を足すということを、

クリックのたびに繰り返します。

また、

ボタンの「リセット」が押されたときは、

このように、

値を「0」に戻して、

表示が上記のようになります。

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

サンプルの動きとして、

以下を参考にしてください。

課題のサンプル動作

ポイント（数字を文字として表示）

DOM操作で、

文字列として、結果に数値を入れたい時は、

「数値」を「文字列」に変換して、

他の文字列と連結したり、表示する必要があります。

この数字を文字列として表示するときは、

toString()

を使用します。

使い方としては、

let sample = 7;

let sampleDom = document.querySelector('.sample-dom');

sampleDom.textContent = sample.toString();

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

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

DOM操作の中でも、

「textContent」

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

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

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

答え

HTML

<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample Dom/Event</title>
  </head>
  <body>
    <div>
      <label class="text-result">値:0</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 sampleResult = document.querySelector('.text-result');
let sampleButton1 = document.querySelector('#change-text1');
let sampleButton2 = document.querySelector('#change-text2');
let sampleButton3 = document.querySelector('#change-text3');

const baseText = '値；';

let resultValue = 0;

sampleButton1.addEventListener('click',event => {
  // 値を初期化（０に戻す）
  resultValue = 0;
  changeResultText();
})

sampleButton2.addEventListener('click',event => {
  calculationValue(-1);
  changeResultText();
})

sampleButton3.addEventListener('click',event => {
  calculationValue(1);
  changeResultText();
})

function calculationValue(setValue) {
  // 値を計算
  resultValue = resultValue + setValue;
}

function changeResultText() {

  // 表示を更新
  sampleResult.textContent = baseText + resultValue.toString();

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