Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to select a random element from array in JavaScript ?

  • Difficulty Level : Medium
  • Last Updated : 21 Jul, 2021

The task is to select the random element from the array using JavaScript.

Approach 1:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Use Math.random() function to get the random number between(0-1, 1 exclusive).
  • Multiply it by the array length to get the numbers between(0-arrayLength).
  • Use Math.floor() to get the index ranging from(0 to arrayLength-1).

Example: This example implements the above appraoach.




<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to select a random element
        from array in JavaScript ?
    </title>
</head>
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p id = "GFG_UP" style
        "font-size: 15px; font-weight: bold;"
    </p>
      
    <button id = "button" onclick = "GFG_Fun()"
        click here 
    </button
      
    <p id = "GFG_DOWN" style
        "font-size: 24px; font-weight: bold; color: green;"
    </p
      
    <script
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
          
        var arr = ["GFG_1", "GeeksForGeeks",
                "Geeks", "Computer Science Portal"];
          
        up.innerHTML = "Click on the button to check "
               + "the type of element.<br><br>" + arr;
          
        function GFG_Fun() {
            down.innerHTML = 
                arr[Math.floor(Math.random() * arr.length)];
        
    </script
</body
  
</html>

Output:



  • Before clicking on the button:
  • After clicking on the button:

Approach 2:

  • The random(a, b) method is used to generates a number between(a to b, b exclusive).
  • Taking the floor value to range the numbers from (1 to arrayLength).
  • Subtract 1 to get the index ranging from(0 to arrayLength-1).

Example: This example implements the above approach.




<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to select a random element
        from array in JavaScript ?
    </title>
</head>
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;"
    </p>
      
    <button id = "button" onclick = "GFG_Fun()"
        click here 
    </button
      
    <p id = "GFG_DOWN" style
        "font-size: 24px; font-weight: bold; color: green;"
    </p
      
    <script
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
          
        var arr = ["GFG_1", "GeeksForGeeks", 
                "Geeks", "Computer Science Portal"];
          
        up.innerHTML = "Click on the button to select"
                        + " random element from the"
                        + " array.<br><br>" + arr;
          
        function random(mn, mx) { 
            return Math.random() * (mx - mn) + mn; 
        
          
        function GFG_Fun() {
            down.innerHTML = arr[Math.floor(random(1, 5))-1];
        
    </script
</body
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!