We know that the value property returns the value of input. But it is always of string type. How to return number and date types ?
Read this post completely to know about this.
HTML page
<input id="name" type="text" placeholder="Name"/>
<input id="age" type="number" placeholder="age"/>
<input id="dob" type="date" />
<button id="btn">
Button
</button>
JS Page
document.getElementById("btn").addEventListener("click",() => {
let name = document.getElementById("name");
let age = document.getElementById("age");
let dob = document.getElementById("dob");
console.log(typeof name.value, name.value);
console.log(typeof age.value, age.value);
console.log(typeof dob.value, dob.value);
})
The all three will return string data type. the above code can be replaced with below code to get the desired data types.
Revised JS Page
document.getElementById("btn").addEventListener("click",() => {
let name = document.getElementById("name");
let age = document.getElementById("age");
let dob = document.getElementById("dob");
console.log(typeof name.value, name.value); // string
console.log(typeof age.valueAsNumber, age.valueAsNumber); // number
console.log(typeof dob.valueAsDate, dob.valueAsDate); // object
})
Now the first will return text which is true the second will return number which is also true the third will return object which is confusing. Because still we are not able to trace weather it is date or not. To be sure that it is of date type please remodify the code as below.
document.getElementById("btn").addEventListener("click",() => {
let name = document.getElementById("name");
let age = document.getElementById("age");
let dob = document.getElementById("dob");
console.log(typeof name.value, name.value);
console.log(typeof age.valueAsNumber, age.valueAsNumber);
console.log(dob.valueAsDate instanceof Date, dob.valueAsDate);
})
Now third one will return true if you entered date, false if it is blank.