How to make buttons that increment and decrement a value when clicked?

Question

I am new to programming. Every time I run this code, nothing happens. Can you please tell me why this is?

user_4777244 · Answer

HTML code for UI


      
       How many guests can stay?

Java Script:

// set event for guest counter
$(".guestCounter li").on("click", function (element) {
    var operationType = $(this).attr("data-btn-type");
    //console.log(operationType);
    var oldValue = $(this).parent().find("input").val();
    //console.log(oldValue);

    let newVal;
    if (operationType == "increment") {
         newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
             newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 1;
        }
    }
    $(this).parent().find("input").val(newVal);
});

user_15681533 · Answer

var x = 1;
document.getElementById('output-area').innerHTML = x;
function button1() {
  document.getElementById('output-area').innerHTML = ++x;

}
function button2() {
  if(x <= 0 ){
    alert(' minimum value 0 // By Khaydarov Marufjon marvell_it academy uzb ')
    return false ;
  }
  document.getElementById('output-area').innerHTML = --x;
}

input{
  width: 70px;
   background-color: transparent;
   padding: 20px;
   text-align: center;
 }
 button{
   padding: 20px;
 }

user_13795525 · Answer

This question is very common. I have developed a solution with Bootstrap and pure JavaScript in another very similar thread here. There is autoincrement input on keeping button pressed down. Use ontouchstart and ontouchend instead than onmousedown and onmouseup method for mobile. To make it work for both mobile and desktop browser without headache use onpointerdown, onpointerup, onpointerleave

https://stackoverflow.com/a/70957862/13795525

function imposeMinMax(el) {
    if (el.value != '') {
        if (parseInt(el.value) < parseInt(el.min)) {
            el.value = el.min;
        }
        if (parseInt(el.value) > parseInt(el.max)) {
            el.value = el.max;
        }
    }
}


var index = 0;
var interval;
var timeout;
var stopFlag=false;

function clearAll(){
   clearTimeout(timeout);
   clearInterval(interval);
}


function modIn(el) {
   var inId = el.id;
   if (inId.charAt(0) == 'p') {
      var targetId = inId.charAt(2);      
      var maxValue = Number(document.getElementById(targetId).max);
      var actValue = Number(document.getElementById(targetId).value);
      index = actValue;
      if(actValue < maxValue){
         stopFlag=false;
         document.getElementById(targetId).value++;
      }else{
      stopFlag=true;
      }
      timeout = setTimeout(function(){
      interval = setInterval(function(){        
         if(index+1 >= maxValue){
            index=0;
            stopFlag=true;
         }  
         if(stopFlag==false){
            document.getElementById(targetId).value++;
         } 
         index++;
      }, 100);
      }, 500);      
   imposeMinMax(document.getElementById(targetId));
   }
   if (inId.charAt(0) == 'm') {
      var targetId = inId.charAt(2);
      var minValue = Number(document.getElementById(targetId).min);
      var actValue = Number(document.getElementById(targetId).value);
      index = actValue;
      if(actValue > minValue){
         stopFlag=false;
         document.getElementById(targetId).value--;
      }else{
         stopFlag=true;
      }
      timeout = setTimeout(function(){
         interval = setInterval(function(){        
            if(index-1 <= minValue){
               index=0;
               stopFlag=true;
            }  
            if(stopFlag==false){
               document.getElementById(targetId).value--;
            } 
            index--;
         }, 100);
         }, 500);      
      imposeMinMax(document.getElementById(targetId));
   }
}




  Button example

How to make buttons that increment and decrement a value when clicked?

7 Answers