JavaScript Maximalwert setzen und schneller Value-Wechsel?

Hallo zusammen,

ich habe folgenden +/- Increment und Decrement Button. Kann ich dort einen Maximalwert setzen?

Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

Vorab danke für die Antworten!

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;
     }
   });

Answer 1

[MrAmazing2]

Eine alternative Lösung zu der von TechPech wäre mit Math.min() und Math.max()

let a = 1;
const max = 10;
const min = 1;

plus.addEventListener("click", ()=>{
  a = Math.min(a+1, max);
  a = (a < 10) ? "0" + a : a;
  num.innerText = a;
});
minus.addEventListener("click", ()=>{
  a = Math.max(a-1, min);
  a = (a < 10) ? "0" + a : a;
  num.innerText = a;
});

Dein Code hat momentan sehr viel doppelt, man könnte ihn so verkürzen:

let a = 1;
const max = 10;
const min = 1;

plus.addEventListener("click", ()=>changeValue(+1));
minus.addEventListener("click", ()=>changeValue(-1));

function changeValue(change) {
  a = Math.min( Math.max( a+change, min ), max);
  num.innerText = (a < 10) ? "0" + a : a;
}

Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

Indem du anstatt des click-Event-Listeners einen mousedown- und mouseup-Listener machst, und darin einen Loop startest.

let loop;
plus.addEventListener("mousedown", () => {updateValue(+1); loop = setInterval( () => updateValue(+1), 200)} );
minus.addEventListener("mousedown", () => {updateValue(-1); loop = setInterval( () => updateValue(-1), 200)} );
document.addEventListener("mouseup", () => clearInterval(loop));

Fiddle: https://jsfiddle.net/1mso94br/

Woher ich das weiß: Hobby – Programmieren ist mein Hobby & Beruf

Answer 2

[TechPech1984]

  https://jsfiddle.net/aed5wyhL/

let max = 10;

  plus.addEventListener("click", ()=>{
  if(a < max){

    a++;

    a = (a < 10) ? "0" + a : a;

    num.innerText = a;
  }
  });

Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

verstehe ich nicht, was ist schneller ?

Answer 3

[TechPech1984]

Der Schneller werden effekt mit verzögerung nach 1 sekunde

https://jsfiddle.net/aed5wyhL/3/

var pressTimer;
var counting;
plus.addEventListener("mouseup",()=>{
 clearTimeout(counting);
 clearTimeout(pressTimer);

 // Clear timeout
 return false;
});
plus.addEventListener("mousedown",()=>{
 // Set timeout
 pressTimer = window.setTimeout(function() {
   counting = window.setInterval(function() {
    if(a < max){

      a++;

      a = (a < 10) ? "0" + a : a;

      num.innerText = a;
    }  
   },100);
 },1000);
 return false; 
});

minus.addEventListener("mouseup",()=>{
 clearTimeout(counting);
  clearTimeout(pressTimer);
 
  // Clear timeout
  return false;
});
minus.addEventListener("mousedown",()=>{
  // Set timeout
  pressTimer = window.setTimeout(function() {
    counting = window.setInterval(function() {
     if(a > 1){

       a--;

       a = (a < 10) ? "0" + a : a;

       num.innerText = a;

     }
    },100);
  },1000);
  return false;
});