Generate Random Number On A Click of Button Using JavaScript.

In this blog post we’ll learn how to generate random numbers of custom length on click using JavaScript.

generate random numbers using javascript

JavaScript Methods Used:

Math.floor(): Round the number down.
Math.random(): Generate the random number between 0 (inclusive) and 1 (exclusive).
For loops: For running the code block many times.

Generate Random Numbers Using JavaScript.

So, we're going to generate a random number when a button is clicked and display that generated number in an input field.

We'll create a function that generate random numbers that runs when the button is clicked.

We'll see two examples of generating random number using javascript.

Example 1:

Description of generating a random number:

1. Function creation:

First, we'll create a function specifically for this purpose. That run on click of button.

2. Start For loop:

Inside the function, we'll start a for loop.

3. Random number generation:

Within the for loop, we'll generate a random number between 1 and 9 (a single digit) with the JavaScript method Math.floor() and Math.random().

The length of the random number depends on the number of times the for loop runs. If you want a 4-digit number, the loop needs to run 4 times. If you want a 6-digit number, it needs to run 6 times, and so on.

4. Storing the random number:

After generating the random number, we'll store it inside the input field.

See the commented code below for a better understanding.

HTML


<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate Random Numbers | maketechstuff.com</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="box">

        <input type="text" class="input_field">
        <button type="button" class="button">Generate Random Number</button>

    </div>

</body>
</html>

CSS


* {
    padding: 0px;
    margin: 0px;
}

body {
    width: 100%;
    height: 100vh;
    background-color: blue;
}


.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    text-align: center;
}
input{
    width: 400px;
    font-size: 35px;
    text-align: center;
    padding: 10px 20px;
    margin: 20px 0px;
    border: none;
    outline: none;
    pointer-events: none;
}
button{
    font-size: 25px;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: black;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}
button:active{
    scale: 0.9;
}

JavaScript


    let input_field = document.querySelector(".input_field");
    let button = document.querySelector(".button");

    button.addEventListener("click" , generate_random_number);
    let random_number_length = 4;

    function generate_random_number(){
        input_field.value = "";
        for (let i = 0; i < random_number_length; i++) {    
            // Generating random number from 1 to 9.
            let random_number = Math.floor(Math.random() * 10);

            // Adding random number in input field.
            input_field.value += random_number; 
            
        }
    }

Output:

There's is also an another way for generating random numbers using JavaScript.

Example 2:

You can generate random numbers from your pre defined string (string of numbers).

Generating Random Number From Pre-Defined String:

1. Generate a random number:

First, we generate a random number using JavaScript's built-in functions Math.random() and Math.floor().

2. Use the generated number as an index:

Then we use this generated random number as an index within the predefined string.

3. Extract characters:

This allows us to extract specific characters from the string based on the generated random value (use as index values).

See the commented code below for a better understanding.

JavaScript


    let input_field = document.querySelector(".input_field");
    let button = document.querySelector(".button");

    button.addEventListener("click" , generate_random_number);
    let random_number_length = 4;

    function generate_random_number(){
        // Pre defined string. From which we going to select random characters.
        let string = "123456789";
        input_field.value = "";
        for (let i = 0; i < random_number_length; i++) {    
            // Generating random number.
            let random_number = Math.floor(Math.random() * string.length);

            // Adding string characters inside input field based on index value generated (random_number).
            input_field.value += string[random_number]; 
            
        }
    }

Output:

Generate random number from your pre defined string characters.

So that’s how you can generate random numbers using JavaScript with just a click. If you have any query or suggestion, feel free to write in the comment section.

Thanks for reading.

You may like:

Generate Random Number On A Click of Button Using JavaScript.

JavaScript Methods Used:

Generate Random Numbers Using JavaScript.

Description of generating a random number:

1. Function creation:

2. Start For loop:

3. Random number generation:

4. Storing the random number:

Generating Random Number From Pre-Defined String:

1. Generate a random number:

2. Use the generated number as an index:

3. Extract characters:

Post a Comment

Contact form

Generate Random Number On A Click of Button Using JavaScript.

JavaScript Methods Used:

Generate Random Numbers Using JavaScript.

Description of generating a random number:

1. Function creation:

2. Start For loop:

3. Random number generation:

4. Storing the random number:

Generating Random Number From Pre-Defined String:

1. Generate a random number:

2. Use the generated number as an index:

3. Extract characters:

You may like these posts

Post a Comment

Contact form