HTML DOM Input Month stepDown() Method



The HTML DOM input month stepDown() method steps down (decrement) the value of input month field by a specified value.

Syntax

Following is the syntax −

object.stepDown(number)

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

Example

Let us see an example of input month stepDown() method −

 Live Demo

<!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! Select your month of birth</p>
<input type="month">
<br>
<button onclick="incValue()">StepUp Value</button>
<button onclick="decValue()">StepDown Value</button>
<script>
   function incValue() {
      document.querySelector("input").stepUp();
   }
   function decValue() {
      document.querySelector("input").stepDown();
   }
</script>
</body>
</html>

Output

This will produce the following output −

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


Sharon Christine
Sharon Christine

An investment in knowledge pays the best interest


Advertisements