「+」「-」ボタンでの数量変更をJavaScriptで実装する方法
「+（プラス）」「-（マイナス）」ボタンを使って数量を変更する方法は、ECサイトなどでよく見かけると思います。
今回は、この「+（プラス）」「-（マイナス）」ボタンをJavaScriptで実装する方法を紹介します。
完成したコード
HTML
<div class="qty">
<div id="down">-</div>
<input type="number" id="textBox">
<div id="up">+</div>
</div>CSS
.qty {
background: #f1ede9;
padding: 20px 10px;
border-radius: 10px;
display: flex;
width: fit-content;
margin: 60px auto;
}
#down, #up {
font-size: 25px;
padding: 0 14px;
cursor: pointer;
user-select: none;
}
#textBox {
border: none;
background: none;
font-size: 18px;
text-align: center;
width: 70px;
}
/* [input type="number"]のデフォルトの矢印を消す */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
-moz-appearance:textfield;
} JavaScript
const qtyDown = document.getElementById('down');
const qtyUp = document.getElementById('up');
const qtyText = document.getElementById('textBox');
let num = 1;
qtyText.value = num;
qtyDown.addEventListener('click', () => {
if(parseInt(qtyText.value) >= 2) { // 1以下にならないように設定
num--;
qtyText.value = num;
}
});
qtyUp.addEventListener('click', () => {
num++;
qtyText.value = num;
});if(parseInt(qtyText.value) >= 2)
数量が2未満の場合は、「-（マイナス）」ボタンを押せなくなるよう設定しました。
さらに上限を制限するには
JavaScript 13~16行目を下記に変更してください
qtyUp.addEventListener('click', () => {
if (parseInt(qtyText.value) < 10) {
num++;
qtyText.value = num;
}
});if (parseInt(qtyText.value) < 10)を追加
数量が10になったら「+（プラス）」ボタンを押せなくなるよう設定しました。こうすることで、数量を1〜10までで制限することができます！
Webデザイナー / コーダーのみなさまへ
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
