HTML DOM Input Number step Property

HTML Web Development Front End Technology

The HTML DOM input number step property returns and modify the value of the step attribute of input number field in an HTML document.

Syntax

Following is the syntax −

Returning step

object.step

Modifying step

object.step = “number”

Example

Let us see an example of HTML DOM input month step property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.1rem;
   }
   input{
      display:block;
      width:35%;
      border:2px solid #fff;
      background-color:transparent;
      color:#fff;
      font-weight:bold;
      padding:8px;
      margin:1rem auto;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      color:#db133a;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Input number step property Demo</h1>
<p>Hi, Enter any number & then try to increment/decrement its value</p>
<input type="number" class="numberInput">
<button type="button" onclick="setStep()" class="btn">Set step to 5</button>
<button type="button" onclick="getStep()" class="btn">Click me to show step value</button>
<div class="show"></div>
<script>
   function setStep(){
      var numberInput = document.querySelector(".numberInput");
      numberInput.step="5";
   }
   function getStep() {
      var numberInput = document.querySelector(".numberInput");
      var showMsg = document.querySelector(".show");
      showMsg.innerHTML = numberInput.step;
   }
</script>
</body>
</html>