JavaScript入門者向けの演習問題です。ここでは、足し引きできるカウンターを作ります。
作るもののイメージ
こういうカウンターを作っていく。
ネットショッピングサイトでよく見かけるカート内商品数を変更するヤツです。
対象者
この演習問題のターゲットは次のような方。
- JavaScript歴1週間程度の入門者。
-
let、変数、関数(アロー関数)、if文を勉強済み。 - HTMLがちょっと分かる。
前提
カウンターを実装する土台として、次のHTMLを使ってください。
<button id="plusButton">+</button>
<button id="minusButton">-</button>
<button id="resetButton">Reset</button>
<input id="counterOutput" value="0">
上記HTMLのタグは上から順に、プラスボタン、マイナスボタン、リセットボタン、カウント数を表示する欄です。
プラスボタンを押したときに加算される機能は実装済みです。下記JavaScriptコードが加算機能を実装したものです。
let counterOutput = document.getElementById("counterOutput");
// 加算機能
let plusButton = document.getElementById("plusButton");
let onClickPlusButton = () => {
counterOutput.value++;
};
plusButton.addEventListener("click", onClickPlusButton);
マイナスボタン、リセットボタンはまだハリボテです。この演習で、上のJavaScriptコードをベースにそれらのボタンを押したときの機能を実装していきます。
演習1: マイナスボタンを押したとき減算できるようにしよう。
マイナスボタンを押したときに、カウント数が1減るように実装してください。
すでに実装済みの加算機能と似た書き方でできるよ。
ヒント1 (クリックで表示する)
加算機能をコピーして、ヒント2 (ほぼ答え) (クリックで表示する)plusをminusに置き換えてみて。あと、++演算子を--演算子に置き換えてみて。
回答例 (クリックで表示する)let counterOutput = document.getElementById("counterOutput");
// 加算機能
let plusButton = document.getElementById("plusButton");
let onClickPlusButton = () => {
counterOutput.value++;
};
plusButton.addEventListener("click", onClickPlusButton);
// 減算機能
let minusButton = document.getElementById("minusButton");
let onClickMinusButton = () => {
counterOutput.value--;
};
minusButton.addEventListener("click", onClickMinusButton);
演習2: リセットボタンを使えるようにしよう。
リセットボタンを押したときに、カウント数が0になるようにしてください。
回答例 (クリックで表示する)let counterOutput = document.getElementById("counterOutput");
// 加算機能
let plusButton = document.getElementById("plusButton");
let onClickPlusButton = () => {
counterOutput.value++;
};
plusButton.addEventListener("click", onClickPlusButton);
// 減算機能
let minusButton = document.getElementById("minusButton");
let onClickMinusButton = () => {
counterOutput.value--;
};
minusButton.addEventListener("click", onClickMinusButton);
// リセット機能
let resetButton = document.getElementById("resetButton");
let onClickResetButton = () => {
counterOutput.value = 0;
};
resetButton.addEventListener("click", onClickResetButton);
演習3: カウント数が0未満にならないようにしよう。
ここまでの実装では、マイナスボタンを何度も押すと、カウント数が負の数になってしまう。マイナス何個と数えることは普通はしないので、カウント数が0になったら、マイナスボタンを押してもそれ以上減算されないようにしよう。
すでに実装済みの減算機能を変更しよう。ヒント1 (どこを変更するか？) (クリックで表示する)
ヒント2 (どこを変更するか？) (クリックで表示する)onClickMinusButton関数の中身を変更すればいいよ。
「もしカウント数が0以下の場合は、減算しない」は、「もしカウント数が1以上のときは、減算する」と言い換えられるよヒント3 (「カウント数が0になったら、それ以上減算しない」の考え方) (クリックで表示する)
回答例 (クリックで表示する)let counterOutput = document.getElementById("counterOutput");
// 加算機能
let plusButton = document.getElementById("plusButton");
let onClickPlusButton = () => {
counterOutput.value++;
};
plusButton.addEventListener("click", onClickPlusButton);
// 減算機能
let minusButton = document.getElementById("minusButton");
let onClickMinusButton = () => {
if (counterOutput.value >= 1) {
counterOutput.value--; // カウント数が1以上のときだけ減算する
}
};
minusButton.addEventListener("click", onClickMinusButton);
// リセット機能
let resetButton = document.getElementById("resetButton");
let onClickResetButton = () => {
counterOutput.value = 0;
};
resetButton.addEventListener("click", onClickResetButton);
動作する完成形
こちらが、ここまでの演習問題を終えた状態の実装です。↓「Result」ボタンを押すと、動作するカウンターが表示されます。「JS」ボタンを押すと、ソースコードも見れます。
See the Pen JavaScript演習問題: 足し引きできるカウンターを作ろう by suin (@suin) on CodePen.
質問はコメントください
質問はコメントください。