<div class="qty">
<div id="down">-</div>
<input type="number" id="textBox">
<div id="up">+</div>
</div>
.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;
}
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;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.