October 11, 2021

How to Generate Random Numbers in Javascript within Range

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to generate random numbers in javascript within range. Random numbers generated by electronic devices such as computers are known as pseudorandom numbers.

They are called pseudorandom numbers because behind the scenes computers use a certain deterministic algorithm to generate random numbers. The sequence of those random numbers gets repeated at a certain point in time. Almost every online random number generator generates pseudorandom numbers behind the scenes.

Like many other programming languages, we do have a specific method to generate random numbers in javascript. We have a built-in Math object that contains the random() method. This method returns a floating-point, a pseudorandom number in a range of 0 to 1 (inclusive of 0, but not 1).

The floating-point might fit your requirement, but we need a whole number within a certain range. To accomplish our goal, we need to utilize the Math.floor() method along with the Math.random() method. The Math.floor() method rounds a number down to its nearest integer.

In the following example, we have one h1 element and one button element. Upon click of a button, we will generate random numbers within a certain range and display it on the screen with the help of the h1 element. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (h1 and button).
The innerText for the button element is “Generate” and for the h1 element, it is “Random Number”.
We are using the style attribute to horizontally center align the text content inside the h1 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">
    <title>Document</title>
</head>

<body>

    <button>Generate</button>

    <h1 id="output" style="text-align: center">Random Number</h1>

    <script src="script.js"></script>
</body>

</html>

Javascript

We have selected the button element and h1 element using the document.querySelector() method and stored them in btn and output variables respectively.
We have getRandomNumber() method and this method takes 2 parameters, min and max. The min indicates the start of the range and the max indicates the end of the range.
In the first step, we are adding 1 to min and subtracting that from max to keep value always more than 1, so that we get the whole number. For example, if max = 5 and min = 5, then after subtraction, the output will be 0 and If you multiply 0 with anything, it will be 0. If we skip the addition of 1, then the second step will return 0.
In the second step, we are generating random floating-point using Math.random() and multiplying it with the result of step 1.
In the third step, we are using Math.floor() and the passing result of step 2 as a parameter. It will round the number down to the nearest integer.
We are storing the output of the third step in the result variable and returning it.
We have attached the click event listener to the button element.
In the event handler function, we are calling the getRandomNumber() method and passing 1 and 100 as parameters. This method will return a random number within that range and we will display it in the h1 element using the innerText property.

let btn = document.querySelector('button');
let output = document.querySelector('#output');


function getRandomNumber(min, max) {
    let step1 = max - min + 1;
    let step2 = Math.random() * step1;
    let result = Math.floor(step2) + min;

    return result;
}

btn.addEventListener('click', () => {
    output.innerText = getRandomNumber(1, 100);
});

You May Also Like: