Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 Month Step Property
The HTML DOM input month step property returns and modify the value of the step attribute of input month field in an HTML document.
Syntax
Following is the syntax −
1. Returning step
object.step
2. 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 month step property Demo</h1>
<p>Hi, Select any month for your holiday</p>
<input type="month" class="monthInput">
<button type="button" onclick="setStep()" class="btn">Step = 3</button>
<button type="button" onclick="getStep()" class="btn">Click me to show step
value</button>
<div class="show"></div>
<script>
function setStep(){
var monthInput = document.querySelector(".monthInput");
monthInput.step="3";
}
function getStep() {
var monthInput = document.querySelector(".monthInput");
var showMsg = document.querySelector(".show");
showMsg.innerHTML = monthInput.step;
}
</script>
</body>
</html>
Output
This will produce the following output −
Click on “Step=3” button to set value of set attribute to 3 and then select any month and then try to change it to understand how set property works.
Updated on: 2020-06-13T08:50:42+05:30
94 Views
Advertisements