Javascript Random Number Generator Code Snippet and Tutorial

drawing numbers from a hat
A man appears to be drawing numbers from a hat, which is not a thing. This graphic was created from a base image licensed from Envato.

How to make a random number generator in javascript using jquery for a Wordpress site, embedded in one code snippet.

Random Number Generator

Drawing 001-086

Ticket numbers were from 001 – 086. This digital drawing will randomly draw one ticket from the lot. Like I used to tell my students when I was a statistics professor, there is never a hat.


Want to Try With Other Endpoints?

You are not likely to have the same range as me (001-086), and what if you do not even want to build your own random number generator using jquery and javascript? What if you just want to use one of mine?

Okay. Here you go. I made one with some added event.Listeners so that you can do that. Go ahead and try it out! Drop in your minimum and maximum ticket numbers.


Want the code snippet I came up with for the first one, in order to make your own? Here you go. The key functions are Math.floor() and Math.random(). See here for more on Math.random if you want.

function embed_random_number_generator_script() {
  ob_start(); ?>

  <div id="random-number-generator">
    <button id="draw">Draw</button>
    <button id="reset">Reset</button>
    <div id="result">Ready!</div>

    (function () {
      // Create an array to store the available numbers
      var availableNumbers = [];

      // Populate the available numbers array with the range of values
      for (var i = 1; i <= 86; i++) {
        availableNumbers.push(i.toString().padStart(3, '0'));

      // Create an array to store the drawn numbers
      var drawnNumbers = [];

      // Function to handle the draw button click
      function handleDrawClick() {
        var resultContainer = document.getElementById('result');

        // Check if all numbers have been drawn
        if (availableNumbers.length === 0) {
          resultContainer.innerHTML = 'No numbers available!';

        var randomIndex = Math.floor(Math.random() * availableNumbers.length);
        var randomNumber = availableNumbers.splice(randomIndex, 1)[0];

        resultContainer.innerHTML = randomNumber;

      // Function to handle the reset button click
      function handleResetClick() {
        availableNumbers = [];
        drawnNumbers = [];

        for (var i = 1; i <= 86; i++) {
          availableNumbers.push(i.toString().padStart(3, '0'));

        document.getElementById('result').innerHTML = 'Ready!';

      // Add event listeners to the buttons
      document.getElementById('draw').addEventListener('click', handleDrawClick);
      document.getElementById('reset').addEventListener('click', handleResetClick);

  <?php return ob_get_clean();
add_shortcode('random_number_generator', 'embed_random_number_generator_script');

Details and Notes

The Draw button runs the function on the full range, in my case from 1-86. If you press the draw button a second time, it will draw a second number without replacement. Want to start over? Hit reset. That resets it all, replacing all drawn numbers to start over.

The availableNumbers array contains all the numbers in the range (001-086). Each time the Draw button is clicked, a random number is selected from the availableNumbers array, removed from it, and added to the drawnNumbers array. The process ensures that only the remaining available numbers are drawn.

The confetti button has nothing to do with the random number generator, and is using this javascript library.

If you run a child theme, drop this code into functions.php. Otherwise, use a code snippets plugin. I personally use WP Codebox on all my sites, and I like the conditional logic, because I can load a script just where it is needed, so the rest of the site stays lite.

I just dropped my [random-number-generator] shortcode into a container block, assigned a css class to the container, and applied the styling I wanted for margins, font, and flex layout.

For example, what you see above on this page here? Here is the CSS I applied to make it happen, altho what you see here is also influenced by some global styling and other site-wide variables, right? This is just to give you ideas.

/* Styling the result text */
#random-number-generator #result {
  font-size: 2em;
  margin: 15px;

/* styling the two buttons */
#random-number-generator button {
  margin: 5px;
  width: 100px;
  font-size: 1.5em;

/* Setting the layout for desktop and tablet */
@media (min-width: 768px) {
  #random-number-generator {
    display: flex;
    align-items: center;
    justify-content: space-between;

/* And setting the layout for mobile */
@media (max-width: 767px) {
  #random-number-generator {
    display: flex;
    flex-direction: column;
    align-items: center;

About Erika Sanborne

Erika Sanborne is the WordPress developer and agency owner at Our Future Site, a division of Erika Sanborne Media LLC. In addition to web development, Erika produces digital graphics, videos, animated explainers, and portraiture work. Her other hats include: long-time math and psychological science educator, ordained UCC clergy, disabled veteran for peace, disability justice advocate, population health and disability policy researcher, and sociology PhD candidate. All at the same time. Yeah. She keeps busy. | More About Erika