HTML DOM Input Number stepUp() Method

The DOM input number stepUp() method increments the value of input number field by a specified value.

Syntax

Following is the syntax −

object.stepUp(number)

Here, if number parameter is omitted then it increments the value by 1.

Example

Let us see an example of HTML DOM input number stepUp() method −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM stepUp()/stepDown() Demo</title>
<style>

   body{
      text-align:center;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
      center/cover no-repeat;
      height:100vh;
      color:#fff;
   }

   p{
      font-size:1.5rem;
   }

   input{
      width:40%;
   }

   button{
      background-color:#db133a;
      color:#fff;
      padding:8px;
      border:none;
      width:120px;
      margin:1rem;
      border-radius:50px;
      outline:none;
      cursor:pointer;
   }

</style>
</head>
<body>
<h1>stepUp()/stepDown() Method Demo</h1>
<p>Hi! How old are you?</p>
<input type="number">
<br>
<button onclick="incValue()">StepUp Value</button>
<button onclick="decValue()">StepDown Value</button>
<script>
   function incValue() {
      document.querySelector("input").stepUp(10);
   }
   function decValue() {
      document.querySelector("input").stepDown(10);
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Input Number stepUp() Method

Now Click on “StepUp Value” or “StepDown Value” button to increment or decrement the value of input number field.

HTML DOM Input Number stepUp() Method