Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Input Number step Property
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 −
<!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>Output
This will produce the following output −
Enter the value in number input and then click on “Set step to 5” button to set step=5.
Now try to increment/decrement its value using up & down keys.
Now click on “Click me to show step value” to see current step value.
Updated on: 01-Jul-2020
69 Views
Advertisements