how to increment and decrement the text box value using javascript?

Question

i am trying increment and decrement a number if user is giving in text box is 15 it should be incremented when click a button and also decrement when button clicking...

this is my javascript code

function incNumber() {
  for (i = 1; i > 0; i++) {
    document.getElementById("display").value = i;
  }
}

function decNumber() {
  for (i = 1; i > 0; i--) {
    document.getElementById("display").value = i;
  }
}

<form>
  <input type="text" value="0"/>
  <input type="button" value="Increase" id="inc" onclick="incNumber()"/>
  <input type="button" value="Decrease" id="dec" onclick="decNumber()"/>

  <label id="display"></label>
</form>

Remove for loops, they are not required. Simply, update the value everytime function is called. — user6249539
– user6249539, Commented Oct 20, 2016 at 5:33
you mean to increment the number ,if user has entered 15 as input else decrement ...is that what you want — Geeky
– Geeky, Commented Oct 20, 2016 at 5:33
if any number is giving the user in text box it should be increase when button clicks and decrease when another button clicks.. — Dep
– Dep, Commented Oct 20, 2016 at 5:35

user6360214 · Accepted Answer · 2016-10-20 05:34:49Z

1

Use parseInt() function to convert the value from string to integer.

function incNumber(){
    var c = parseInt(document.getElementsByTagName("input")[0].value);
    c++;
    document.getElementsByTagName("input")[0].value = c;
    document.getElementById("display").innerHTML = c;
}

The logic stands for decNumber()

function decNumber(){
    var c = parseInt(document.getElementsByTagName("input")[0].value);
    c--;
    document.getElementsByTagName("input")[0].value = c;
    document.getElementById("display").innerHTML = c;
}

answered Oct 20, 2016 at 5:34

user6360214

Sign up to request clarification or add additional context in comments.

Comments

Geeky · Accepted Answer · 2016-10-20 05:44:56Z

Few suggestions 1.Never mix up your markup with javascript. Consider attaching events click/change at javascript end

DOM search is costly.use it cautiously 3.Use parseInt(variablename,10) ->to convert it into integer

check the following snippet

window.onload=function(){
  var incButton=document.getElementById("inc");
  incButton.addEventListener("click",incNumber);
  var decButton=document.getElementById("dec");
  decButton.addEventListener("click",decNumber);
}
function incNumber() {
          var displayValue= document.getElementById("display");
  var text=document.getElementById("input");
  var value=parseInt(text.value,10);
  
  if(value==15){
       displayValue.innerHTML=value+1;
  }
}
    

    function decNumber() {
      var displayValue= document.getElementById("display");
  var text=document.getElementById("input");
  var value=parseInt(text.value,10);
        displayValue.innerHTML=value-1;
  
   }

<form>
    <input type="text" value="0" id="input"/>
    <input type="button" value="Increase" id="inc" />
    <input type="button" value="Decrease" id="dec" />

    <label id="display"></label>
</form>

Hope this helps

APECE · Accepted Answer · 2016-10-20 05:56:29Z

If you want to increment the label value by the input value try this

function incNumber(){
     var num=0;
     if(isNaN(document.getElementById('diplay').innerHTML)){
          num=$("#inputVal").val();
     }
     else{
          num=parseInt(document.getElementById('diplay').innerHTML)+$("#inputVal").val();
     }
     document.getElementById('diplay').innerHTML=num;
}

 function decNumber(){
     var num=0;
     if(isNaN(document.getElementById('diplay').innerHTML)){
          num=$("#inputVal").val();
     }
     else{
          num=parseInt(document.getElementById('diplay').innerHTML)-$("#inputVal").val();
     }
     document.getElementById('diplay').innerHTML=num;
}

In HTML

<form>
<input type="number" id="inputVal" value="0"/>
<input type="button" value="Increase" id="inc" onclick="incNumber()"/>
<input type="button" value="Decrease" id="dec" onclick="decNumber()"/>

<label id="display"></label>

Vivek Krishna · Accepted Answer · 2016-10-20 06:12:57Z

0

or you can define input type as number

<input type="number" id="numbrfield"/>

you will automatically get buttons to increment or decrement when you hover on the field.

answered Oct 20, 2016 at 6:12

Vivek Krishna

894 silver badges12 bronze badges

Comments

Amit · Accepted Answer · 2025-05-16 09:35:13Z

Try the below code

<style>
    #display {
        font-weight: bold;
        margin: 0 10px;
    }
</style>

<button id="dec">Decrease</button>
<span id="display">0</span>
<button id="inc">Increase</button>

<script>
    let count = 0;
    const display = document.getElementById('display');

    document.getElementById('inc').onclick = () => {
        display.textContent = ++count;
    };

    document.getElementById('dec').onclick = () => {
        display.textContent = --count;
    };
</script>

OR

 <script>
 let number = 0;
 function updateDisplay() {
        document.getElementById("display").innerText = number;
    }

    function incNumber() {
        number++;
        updateDisplay();
    }

    function decNumber() {
        number--;
        updateDisplay();
    }

    window.onload = function () {
        updateDisplay(); // Show initial value
    };
</script>

Collectives™ on Stack Overflow

how to increment and decrement the text box value using javascript?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related