【JavaScript】カートで使う増減ボタンを作成する

2024年11月5日

カートで使うような数値を増減できるボタンを作りたいな～

というわけで今回はカートで使う増減ボタンの作成方法をご紹介します。

カートで使う増減ボタンを作成する

まずは完成版をご覧ください↓

See the Pen カートで使う増減ボタン by そす (@Sosgoyo) on CodePen.

上記ボタンの「＋」「－」ボタンを押してみてください。
真ん中の数字が増えたり減ったりしますね！
よくショッピングサイトなどで見るボタンかと思います。
これをJavaScriptを使用して実装してみます。

ではコードを見ていきましょう！

各コード紹介

【HTML】

<div class="container">
  <div class="ec-select">
    <button type="button" class="ec-decrement" id="decrement">－</button>
    <input type="number" class="ec-input" id="quantity" value="1" min="1">
    <button type="button" class="ec-increment" id="increment">＋</button>
  </div>
</div>

【CSS】

.container {
  margin-top: 50px;
  margin-left: 50px;
  max-width: 300px;
}

input[type='number'] {
appearance: none;
  border: none;
  text-align: center;
}

button {
 border: none;
  background-color: #fff;
}

.ec-select {
	display: flex;
	justify-content: space-between;
	max-width: 315px;
	width: 100%;
	border: 1px solid #000;
	padding: 18px 28px;
	font-size: 16px;
	font-weight: 500;
	line-height: calc(23 / 16);
	color: #458D54;
}

.ec-input {
  width: 100%;
}

HTML、CSSに関してはそこまで特別なことはしていません。
ボタンのデザインを整えるCSSですね。
JavaScriptでidを使用しますので、HTMLでidの設定をしております。

【JavaScript】

document.getElementById("increment").addEventListener("click", function() {
	let quantityInput = document.getElementById("quantity");
	let currentValue = parseInt(quantityInput.value);
	quantityInput.value = currentValue + 1;
});

document.getElementById("decrement").addEventListener("click", function() {
	let quantityInput = document.getElementById("quantity");
	let currentValue = parseInt(quantityInput.value);
	if (currentValue > 1) { // 最低数量を1に制限
		quantityInput.value = currentValue - 1;
	}
});

では、下記よりJavaScriptの説明をしていきます！

インクリメントの処理

document.getElementById("increment").addEventListener("click", function() {
	let quantityInput = document.getElementById("quantity");
	let currentValue = parseInt(quantityInput.value);
	quantityInput.value = currentValue + 1;
});

document.getElementById("increment")：HTML内のidがincrementの要素（通常は+ボタン）を取得します。

addEventListener("click", function() { ... })：取得した要素にクリックイベントを追加します。ボタンがクリックされた際に、指定された無名関数（function）が実行されます。

let quantityInput = document.getElementById("quantity");：idがquantityの入力フィールド（<input>要素）を取得し、それをquantityInputという変数に格納します。

let currentValue = parseInt(quantityInput.value);：現在の数量をquantityInput.valueから取得し、parseInt関数で数値に変換してcurrentValueという変数に格納します。
parseInt関数は、文字列を整数に変換する関数です。

quantityInput.value = currentValue + 1;：現在の数量currentValueに1を足して、その新しい値をquantityInputの値として設定します。

デクリメントの処理

document.getElementById("decrement").addEventListener("click", function() {
	let quantityInput = document.getElementById("quantity");
	let currentValue = parseInt(quantityInput.value);
	if (currentValue > 1) { // 最低数量を1に制限
		quantityInput.value = currentValue - 1;
	}
});

基本的な構造はインクリメントの処理と同じです。デクリメントボタンのidを使ってイベントを設定しています。

if (currentValue > 1) { ... }：ここで重要な点は、数量が1未満になることを防ぐための条件分岐です。currentValueが1より大きい場合のみ、数量を減らします。

quantityInput.value = currentValue - 1;：条件が満たされた場合にのみ、currentValueから1を引いて、新しい値をquantityInputに設定します。

ではもう一度完成品を見ていきましょう。

See the Pen カートで使う増減ボタン by そす (@Sosgoyo) on CodePen.