How to Generate Random Numbers Between Min and Max

In this blog post, I will teach you how to generate random numbers between a minimum number and a maximum (both inclusive). I will explain completely but basic knowledge of HTML and JavaScript languages is needed.

The final codes are below as a CodePen. After that, I will explain it step by step.

See the Pen Generate a random number between minimum and maximum by Alvand WordPress Themes (@alvand1399) on CodePen.

Generate Random Numbers – HTML Explanation

First, we need an HTML button element to click and get the random number. I added the id attribute with the value of generate to it so we can add functionality to it using JavaScript. This is the code:

<button type="button" id="generate">Generate</button>

Next, I defined an HTML paragraph element to show the result after clicking on the previously created button. I added the id attribute with the value of output to it so we can change its text value using JavaScript. This is the code:

<p id="output"></p>

Generate Random Numbers – JavaScript Explanation

Now, in JavaScript, I defined a button variable and grab the HTML button element via DOM using the query selector. Now we can add whatever functionality to it that we want. This is the code:

const button = document.querySelector("#generate");

After that, I defined an output variable and grab the HTML paragraph element via DOM using the query selector. Then we can show the random number in the output using it. This is the code:

const output = document.querySelector("#output");

I added an event listener to the button element so something happens when I click on it. In this case, run an arrow function that calculates and prints the output to the mentioned paragraph element.

button.addEventListener("click", () => {
  const min = 1;
  const max = 10;
  output.innerText = Math.floor(Math.random() * (max - min + 1) + min);
});

Some description of the above code is coming.

The below code defined a variable that shows the minimum number we want (in this case = 1):

const min = 1;

The below code defined a variable that shows the maximum number we want (in this case = 10):

const max = 10;

In the below, the calculated value of the statement on the right of the equal sign will show on the paragraph element inner text:

output.innerText = Math.floor(Math.random() * (max - min + 1) + min);

But what is the statement of the right? I use explanations that Aaron Plocharczyk posted on this StackOverflow. It is better than mine.

Say we want a random number from 5 to 15 (including both 5 and 15 as possible results). Well, we’re going to have to work with Math.random(), which only produces values from 0 through approximately 0.99999999999999, so we need to do two tricks to be able to work with this.

Trick Number One

The first trick is recognizing that Math.random()‘s lowest possible return value is 0, and 0 times anything is 0, so we need to start our range at 0 and adjust to account for this at the end. Instead of calculating 5 to 15 from the beginning, we recognize that there are 11 values in 5 to 15 (5, 6, 7, 8, 9, 10, 11, 12, 13, 14, and 15) and count up that many from 0 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10) to use 0 to 10 as our range instead.

This is what the max - min part of the formula does. It defines our new max as 10. Then, at the end of the calculations, we’ll just add 5 back to whatever result we get to make the possible result range change from 0 to 10 to 5 to 15. This is what the + min part of the formula does.

Trick Number Two

The second trick is recognizing that multiplying Math.random() by our new max range of 10 can only give us a result as high as about 9.999999999999 because Math.random() only goes as high as about 0.99999999999 (never actually 1). When we Math.floor() that later to make it an integer, it brings the result down to 9, so we need to add 1 there to make the maximum possible value 10 instead of 9. That’s what the + 1 part of the formula does.

Aaron Plocharczyk

Conclusion

By following above, you can generate random numbers. I hope this helps you. If you have any comments, share them below.