JavaScript演習問題: 足し引きできるカウンターを作ろう

JavaScript入門者向けの演習問題です。ここでは、足し引きできるカウンターを作ります。

## 作るもののイメージ

こういうカウンターを作っていく。

![2019-04-25 13.33.49.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/7a6c669b-7b27-4843-7529-f0830fb53342.gif)

ネットショッピングサイトでよく見かけるカート内商品数を変更するヤツです。

## 対象者

この演習問題のターゲットは次のような方。

* JavaScript歴1週間程度の入門者。
* `let`、変数、関数(アロー関数)、if文を勉強済み。
* HTMLがちょっと分かる。

## 前提

カウンターを実装する土台として、次のHTMLを使ってください。

```html
<button id="plusButton">+</button>
<button id="minusButton">-</button>
<button id="resetButton">Reset</button>
<input id="counterOutput" value="0">
```

上記HTMLのタグは上から順に、プラスボタン、マイナスボタン、リセットボタン、カウント数を表示する欄です。

プラスボタンを押したときに加算される機能は実装済みです。下記JavaScriptコードが加算機能を実装したものです。

```js
let counterOutput = document.getElementById("counterOutput");

// 加算機能
let plusButton = document.getElementById("plusButton");
let onClickPlusButton = () => {
  counterOutput.value++;
};
plusButton.addEventListener("click", onClickPlusButton);
```

マイナスボタン、リセットボタンはまだハリボテです。この演習で、上のJavaScriptコードをベースにそれらのボタンを押したときの機能を実装していきます。

## 演習1: マイナスボタンを押したとき減算できるようにしよう。

マイナスボタンを押したときに、カウント数が1減るように実装してください。

<details><summary>:bulb:ヒント1 (クリックで表示する)</summary>すでに実装済みの加算機能と似た書き方でできるよ。</details>

<details><summary>:bulb:ヒント2 (ほぼ答え) (クリックで表示する)</summary>加算機能をコピーして、`plus`を`minus`に置き換えてみて。あと、`++`演算子を`--`演算子に置き換えてみて。</details>

<details><summary>:star2: 回答例 (クリックで表示する)</summary><div>

```js
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);
```
</div>
</details>

## 演習2: リセットボタンを使えるようにしよう。

リセットボタンを押したときに、カウント数が0になるようにしてください。

<details><summary>:star2: 回答例 (クリックで表示する)</summary><div>

```js
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);
```
</div>
</details>

## 演習3: カウント数が0未満にならないようにしよう。

ここまでの実装では、マイナスボタンを何度も押すと、カウント数が負の数になってしまう。マイナス何個と数えることは普通はしないので、カウント数が0になったら、マイナスボタンを押してもそれ以上減算されないようにしよう。

<details><summary>:bulb:ヒント1 (どこを変更するか？) (クリックで表示する)</summary>すでに実装済みの減算機能を変更しよう。</details>
<details><summary>:bulb:ヒント2 (どこを変更するか？) (クリックで表示する)</summary>`onClickMinusButton`関数の中身を変更すればいいよ。</details>
<details><summary>:bulb:ヒント3 (「カウント数が0になったら、それ以上減算しない」の考え方) (クリックで表示する)</summary>「もしカウント数が0以下の場合は、減算しない」は、「もしカウント数が1以上のときは、減算する」と言い換えられるよ</details>

<details><summary>:star2: 回答例 (クリックで表示する)</summary><div>

```js
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);
```
</div>
</details>


## 動作する完成形

こちらが、ここまでの演習問題を終えた状態の実装です。↓「Result」ボタンを押すと、動作するカウンターが表示されます。「JS」ボタンを押すと、ソースコードも見れます。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="suin" data-slug-hash="axQwKa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="JavaScript演習問題: 足し引きできるカウンターを作ろう">
  <span>See the Pen <a href="https://codepen.io/suin/pen/axQwKa/">
  JavaScript演習問題: 足し引きできるカウンターを作ろう</a> by suin (<a href="https://codepen.io/suin">@suin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 質問はコメントください

質問はコメントください。