# How to Generate Random Numbers in Javascript within Range

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); });