How to Generate Random Number in jQuery
This tutorial demonstrates how to generate random numbers using jQuery.
Generate Random Number in jQuery
jQuery doesn’t provide a built-in method to generate random numbers, but we can use JavaScript’s Math.random() method to generate random numbers using jQuery.
The Math.random() method will generate any number without taking a parameter; the syntax for this method is below.
var RandomNumber = Math.random();
Now let’s use jQuery with the Math.random() method to generate a random number on every click. See the example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Random Number</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
#Random {
background-color : lightgreen;
height: 10%;
width: 20%;
}
#ClickHere {
border: 5px solid green;
background-color : lightgreen;
height: 10%;
width: 20%;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<div class="html-code-output">
<div id="div1">
<h2 id="ClickHere">Click here to Generate random number</h2>
<p>The generated random number is: <h1 id="Random"></h1></p>
</div>
</div>
<script>
$("#ClickHere").click(function(){
$("#Random").text(Math.round(Math.random()*100));
});
</script>
</body>
</html>
The code above will generate a random number on every click. See the output:
jQuery Random Number Between a Range
Now let’s try to generate random numbers between ranges using jQuery; for that purpose, we need to use the following formula.
Math.round(Math.random() * difference + startnumber)
Above, the difference is the difference between the end of the range and the start of the range; let’s try an example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Random Number</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
#Click {
background-color : lightgreen;
height: 50%;
width: 100%;
}
#Main {
border: 5px solid green;
background-color : lightgreen;
height: 10%;
width: 20%;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<div id="Main">
<label for="RangeStart">1st Number</label>
<input type="number" id="RangeStart" value="0" />
<br></br>
<label for="RangeEnd">2nd Number</label>
<input type="number" id="RangeEnd" value="100" />
<h2 id="Click">Click here to Generate Random Numbers</h2>
<h3> The random number between the 0 to 100 are: </h3>
<ul>
<li id="RandomNumber1"></li>
<li id="RandomNumber2"></li>
<li id="RandomNumber3"></li>
<li id="RandomNumber4"></li>
<li id="RandomNumber5"></li>
</ul>
</div>
<script>
$("#Click").click(function(){
var number1 = Number($("#RangeStart").val());
var number2 = Number($("#RangeEnd").val());
var start, end;
var difference = Math.abs(number2 - number1);
if (number2 > number1) {
startnumber = number1;
endnumber = number2;
} else {
startnumber = number2;
endnumber = number1;
}
$("#RandomNumber1").text(Math.round(Math.random() * difference + startnumber));
$("#RandomNumber2").text(Math.round(Math.random() * difference + startnumber));
$("#RandomNumber3").text(Math.round(Math.random() * difference + startnumber));
$("#RandomNumber4").text(Math.round(Math.random() * difference + startnumber));
$("#RandomNumber5").text(Math.round(Math.random() * difference + startnumber));
});
</script>
</body>
</html>
The code above generates random numbers between the range of 0 to 100. See the output:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook