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
How to use JavaScript to check if a number has a decimal place or it’s a whole number?
In this tutorial, we will discuss how we can check for a number whether it is a decimal number or a whole number using the JavaScript. In JavaScript, we can use in−built methods as well as the user defined methods to check for a number if it has a decimal place or it is a whole number. We will discuss about all those methods in details. Let us see what are those methods that we can use to accomplish this task.
Following methods are very useful to check for a number if it is decimal or whole number −
Using the Math.floor() Method.
Using the isInteger() Method.
Using isDecimal() user defined function.
Let us discuss all the above methods in details one by one with code examples −
Using the Math.floor() Method
The floor() method is a in-built method of Math object in JavaScript. The floor method takes a number as parameter and if the passed number is decimal point number, then it returns the lower or the floor value of that number. So, we can check the given number with the floor value returned by the floor method, if both of these values are same then the number is a whole number, else the number is decimal point number.
Syntax
The following syntax is used to implement the floor() method of the Math object in JavaScript −
Math.floor(value);
Let us understand the practical implementation of the floor method while checking for a number whether it is whole number or decimal point number.
Example
Below example will illustrates the use of Math.floor() method to check for a number −
<!DOCTYPE html>
<html>
<body>
<p>Enter a number below and click "Click to check" button to check if number has a decimale place or it's a whole number.</p>
<input type="number" id="input">
<p id="result"></p>
<button onclick="check()">Click to check</button>
<script>
var result = document.getElementById("result");
var inp = document.getElementById("input");
function check() {
var num = inp.value;
var number = Number(num);
if (number === Math.floor(number)) {
result.innerHTML = number + " is a whole number.";
} else {
result.innerHTML = number + " is a decimal number.";
}
}
</script>
</body>
</html>
In the above example, we have used the Math.floor() method to check whether a number is a whole number or it is a decimal number.
Using the isInteger() method
The isInteger() method is a in-built method of Number object in JavaScript. The isInteger() method takes a number and check whether the number is integer or not. If the number is an integer, it returns true, otherwise it returns false.
Syntax
The following syntax is used to implement the isInteger() method of the Number object −
Number.isInteger(value);
Let us understand the isInteger() method with the practical implementation using a code example.
Example
The below code example will explain how to use the isInteger() method to check for a value −
<!DOCTYPE html>
<html>
<body>
<h3>Check if a number has a decimal place or it’s a whole number</h3>
<p>Enter a number and click the below button</p>
<input type="number" id="input">
<p id="result"></p>
<button onclick="check()">Click to check</button>
<script>
var result = document.getElementById("result");
var inp = document.getElementById("input");
function check() {
var num = inp.value;
var number = Number(num);
if (Number.isInteger(number)) {
result.innerHTML = "<b> The given number " + number + " is a whole number not a decimal number. </b>";
} else {
result.innerHTML = "<b> The given number " + number + " is a decimal number not a whole number. </b>";
}
}
</script>
</body>
</html>
In the above example, we have used the isInteger() method to check whether a number is a whole number or it is a decimal number, and we can see that the code is working.
Using the isDecimal() - an user defined function
In JavaScript, we can define our own method to check whether a number input by the user is a decimal number or a whole number. In this method, we will check the number by dividing it with 1, if it is completely divided by 1 then the function will return value as 0 and the number is a whole number. Otherwise, the number is a decimal point number.
Syntax
The following syntax will elaborate on how we can divide the number with 1 to check whether it is a whole number or a decimal −
var varName = number; var check = varName % 1;
Let us understand how we can implement the isDecimal() method practically with help of a code example.
Algorithm
Step 1 − In the first step, we will define an input tag with type number to get a number input from the user.
Step 2 − In this step, we will define the isDecimal() method which takes the input number a parameter and returns true if number id decimal else return false.
Step 3 − In the next step, we will define a call back function for the onclick event associated with the button.
Step 4 − In the last step, we will write the logic of the call back function and use the isDecimal() method inside it to check the number is decimal or whole number.
Example
The below example is the code implementation of the above algorithm that explain how the isDecimal() check for input number is decimal or whole −
<!DOCTYPE html>
<html>
<body>
<h2>Checking using the isDecimal() method.</h2>
<p>Enter a number and check if a number has a decimal place or it’s a whole number</p>
<input type="number" id="input">
<p id="result"></p>
<button onclick="check()">Click to check</button>
<script>
var result = document.getElementById("result");
var inp = document.getElementById("input");
function isDecimal(num) {
return (num % 1);
}
function check() {
var num = inp.value;
var number = Number(num);
if (!isDecimal(number)) {
result.innerHTML = "<b> The given number " + number + " is a whole number not a decimal number. </b>";
} else {
result.innerHTML = "<b> The given number " + number + " is a decimal number not a whole number. </b>";
}
}
</script>
</body>
</html>
In this example, we have used the isDecimal() method to check whether the input number is a decimal number or a whole number. We have used the Number() method in this example, that is because the value we get from the input tag is by default in the form of string, so to convert it into a number we used Number() method.
So, there are three methods of checking whether a number is a decimal number or a whole number which we have discussed in this tutorial. We have seen all these approaches by practically implementing then with help of code examples associated with each method. You can use any of these approaches whenever you need to check if a number has a decimal place or it is a whole number.
16K+ Views
