課題内容
- ＜概要＞
- 文字を表示するタグを準備しましょう。
- 初期表示として、初期値(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+'に変更しました');
}