Hallo zusammen,
ich habe folgenden +/- Increment and Decrement Select Button.
Bei +/- ändert sich der Wert immer 1. Dies möchte ich allerdings in 5er Schritten. Hat da jemand eine Lösung?
HTML:
<div class="wrapper">
<span class="minus">-</span>
<span class="num">01</span>
<span class="plus">+</span>
</div>
CSS:
.wrapper{
height: 120px;
min-width: 380px;
display: flex;
align-items: center;
justify-content: center;
background: #FFF;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
width: 100%;
text-align: center;
font-size: 55px;
font-weight: 600;
cursor: pointer;
user-select: none;
}
.wrapper span.num{
font-size: 50px;
border-right: 2px solid rgba(0,0,0,0.2);
border-left: 2px solid rgba(0,0,0,0.2);
pointer-events: none;
}
JavaScript:
const plus = document.querySelector(".plus"),
minus = document.querySelector(".minus"),
num = document.querySelector(".num");
let a = 1;
plus.addEventListener("click", ()=>{
a++;
a = (a < 10) ? "0" + a : a;
num.innerText = a;
});
minus.addEventListener("click", ()=>{
if(a > 1){
a--;
a = (a < 10) ? "0" + a : a;
num.innerText = a;
}
});
