JavaScript Random

By | August 25, 2022

Math.random()

Math.random() returns a random number between 0 (inclusive),  and 1 (exclusive):

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>Math.random() returns a random number between 0 (included) and 1 (excluded):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.random();
</script>
</body>
</html>

Result:

JavaScript Math.random()

Math.random() returns a random number between 0 (included) and 1 (excluded):

0.7717152983822737

Math.random() always returns a number lower than 1.

JavaScript Random Integers

Math.random() used with Math.floor() can be used to return random integers.

There is no such thing as JavaScript integers.

We are talking about numbers with no decimals here.

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 10) returns a random integer between 0 and 9 (both 
included):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 10);
</script>
</body>
</html>

Result:

JavaScript Math

Math.floor(Math.random() * 10) returns a random integer between 0 and 9 (both included):

8

Example:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 11) returns a random integer between 0 and 10 (both included):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 11);
</script>
</body>
</html>

Result:

JavaScript Math

Math.floor(Math.random() * 11) returns a random integer between 0 and 10 (both included):

2

Example:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 100)) returns a random integer between 0 and 99 
(both included):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 100);
</script>
</body>
</html>

Result:

JavaScript Math

Math.floor(Math.random() * 100)) returns a random integer between 0 and 99 (both included):

24

Example:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor() used with Math.random() * 101 returns a random integer between 0 and 100 
(both included):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 101);
</script>
</body>
</html>

Result:

JavaScript Math

Math.floor() used with Math.random() * 101 returns a random integer between 0 and 100 (both included):

21

Example:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 10) + 1) returns a random integer between 1 and 10 
(both included):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 10) + 1;
</script>
</body>
</html>

Result:

JavaScript Math

Math.floor(Math.random() * 10) + 1) returns a random integer between 1 and 10 (both included):

8

Example:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math</h2>
<p>Math.floor(Math.random() * 100) + 1) returns a random integer between 1 and 
100 (both included):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 100) + 1;
</script>
</body>
</html>

Result:

Math.floor(Math.random() * 100) + 1) returns a random integer between 1 and 100 (both included):

43

A Proper Random Function

As you can see from the examples above, it might be a good idea to create a proper random function to use for all random integer purposes.

This JavaScript function always returns a random number between min (included) and max (excluded):

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>Every time you click the button, getRndInteger(min, max) returns a random number between 0 and 9 (both included):</p>
<button onclick="document.getElementById('demo').innerHTML = getRndInteger(0,10)">Click Me</button>
<p id="demo"></p>
<script>
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
</script>
</body>
</html>

Result:

Result Shown in your browser.

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>Every time you click the button, getRndInteger(min, max) returns a random number between 1 and 10 (both included):</p>
<button onclick="document.getElementById('demo').innerHTML = getRndInteger(1,10)">Click Me</button>
<p id="demo"></p>
<script>
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}
</script>
</body>
</html>

Result:

Result Shown in your browser.

Leave a Reply

Your email address will not be published. Required fields are marked *