September 9, 2021

How to Check Whether a Number is Decimal or Not in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check whether a number is decimal or not in javascript. A number whose whole number part and fraction part is separated by decimal point is known as a decimal number. We have float primitive type to handle decimal numbers in javascript.

There are numerous ways to detect if a number is a decimal number or not, but I am going to share one of the simplest methods. This method involves the usage of the parseFloat() method and modulus operator (%).

The parseFloat() method will take a string as a parameter and return a floating-point number. It may or may not have decimal because it depends if a string contains a whole number or decimal number. The modulus operator (%) returns the remainder of a division.

In the following example, we are going to enter a decimal number in the input field and use a combination of parseFloat() method and modulus operator (%) to detect whether the number is a decimal or not. Depending upon the result, we will display a Boolean value on the screen. Please have a look over the code example and steps given below.

HTML & CSS

We have 4 elements in the HTML file and that includes div, input, button, and h1 elements.
The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Get” and for the h1 button, it is “Result”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <input type="number">
        <button>Get</button>
        <h1>Result</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

div {
    text-align: center;
}

input, button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected button, input, and h1 elements using document.querySelector() and stored them in btnGet, input, and result variables respectively.
We have attached the click event listener to the button element.
In the event handler function, we are using the parseFloat() method and passing the value of the input element to convert the string to a decimal number. We are storing the returned value in the num variable.
We have to divide num by 1 and get the remainder. To achieve that, we are using the modulus operator (%). If the remainder is 0, that means the number is a whole number. Otherwise, it is a decimal number. This calculation results in a Boolean value.
We are displaying that Boolean value in the h1 element.

let btnGet = document.querySelector('button');
let input = document.querySelector('input');
let result = document.querySelector('h1');

btnGet.addEventListener('click', () => {
    let num = parseFloat(input.value);
    result.innerText = num % 1 != 0 ? 'True' : 'False';        
});

You May Also Like: