How to Check if a Number is Divisible by 4 in Javascript
In this tutorial, you will learn how to check if a number is divisible by 4 in javascript. The number which is divisible by 3, will have a remainder of 0. For example 4, 8, 12, 16, etc.
Detecting whether a number is divisible by 4 or not is very easy, but it can be tricky if the number is coming from an input field because the value present in the input field is of string type. So first, we have to convert it into a number type using the Number()
method and then perform any sort of calculations.
There are numerous ways to find whether a number is divisible by 4 or not. But for the sake of simplicity, we will only use the modulus (%
) operator which is enough to get the job done.
In the following example, we will enter a random number in the input field. Upon click of a button, we will check whether the number is divisible by 4 or not and display the result on the screen. Please have a look over the code example and the steps given below.
HTML & CSS
- We have 4 elements in the HTML file (
div
,input
,button
, andh1
). Thediv
element is just a wrapper for the rest of the elements. - The
innerText
for thebutton
element is“Check”
and for theh1
element, it is“Result”
. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
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 class="container"> <input type="number" placeholder="Enter Number"> <button>Check</button> <h1>Result</h1> </div> <script src="script.js"></script> </body> </html>
.container { text-align: center; } button { margin-top: 10px; padding: 10px 20px; } input { display: block; margin: 10px auto; padding: 10px 20px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
Javascript
- We have selected the
input
element,button
element, andh1
element using thedocument.querySelector()
method and stored them ininput
,btnCheck
, andoutput
variables respectively. - We have attached a
click
event listener to thebutton
element. - In the event handler function, we are getting value from the
input
element usingvalue
property. We are converting it into number type using theNumber()
method and storing it in thenum
variable. - We are using the modulus (
%
) operator and ternary (?
) operator to verify whether thenum
can be divided by 4 and has a remainder of 0 or not. Depending upon the returned Boolean value, we will assign“Yes”
or“No”
to theresult
variable. - We are displaying the
result
in theh1
element using theinnerText
property.
let input = document.querySelector("input"); let btnCheck = document.querySelector("button"); let output = document.querySelector("h1"); btnCheck.addEventListener("click", () => { let num = Number(input.value); let result = num % 4 === 0 ? "Yes" : "No"; output.innerText = result; });