JavaScript Tutorial
JavaScript Basics
JavaScript Objects
- js-object
- js-array
- js-string
- js-date
- js-math
- js-number
- js-boolean
JavaScript BOM
JavaScript DOM
JavaScript Validation
- js-form-validation
- js-email-validation
JavaScript OOPs
JavaScript Cookies
JavaScript Events
Exception Handling
- js-exception-handling
- javascript-try-catch
JavaScript Misc
JavaScript Advance
Differences
- jquery-vs-javascript
- javascript-vs-php
Questions
Interview Questions
- javascript-i/q

Random image generator in JavaScript

In this chapter, you will learn how to generate random images on a webpage with the help of JavaScript. So, we will create different random image generator using JavaScript and HTML source code. Firstly, it requires an array to contain the URLs of images to be displayed on the webpage.

The random image generator concept is mostly used for advertisement. The images you see on a website generating randomly, are already stored in a database or an array. These images display to the user within a regular time interval or change by a click. You can also provide the address of an image directly from the internet.

We will discuss two different methods for the random image generator using JavaScript. See both approaches below:

Approach 1

In this approach, images will start displaying randomly on the webpage with a regular time interval by a single click on a button. We will use the setInterval() in-built function of JavaScript to set a timer between the images to display.

In this example, we have used the original size of the image. You can also define the size for each image to display. Now, follow the steps below:

Steps for random image generator

Declare an array using JavaScript to store the images.
Provide the link or URL of images in the declared array. You can also pass the height and width in the array for the image size to display on the webpage.
Declare a JavaScript variable to store a random value calculated using this floor(Math.random()*randomImage.length) method. It will generate a random number between 0 and the length of the array that will be assigned to the images to display randomly.
Now, return the random images selected using a number calculated in the previous step.
Put all the above steps in a user-defined function (getRandomImage), which will call by clicking on a Generate Image
In HTML code, we will use a tab and provide an ID to display an image over another image. So, the images will show you one by one, by overwrapping each other.

Convert these steps into actual implementation.

Copy Code

     <html>
<head> 
<title> Random Image Generator </title>
</head>
<script>
function getRandomImage() {
//declare an array to store the images
var randomImage = new Array();

//insert the URL of images in array
randomImage[0] = "https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";
randomImage[2] = "https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
randomImage[3] = "https://images.unsplash.com/photo-1543877087-ebf71fde2be1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
randomImage[4] = "https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg";
randomImage[5] = "https://images.unsplash.com/photo-1501265976582-c1e1b0bbaf63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";

//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*randomImage.length);

//return the images generated by a random number
return document.getElementById("result").innerHTML = '<img src="'+randomImage[number]+'" />';
}

</script>
<body>
<center><h2 style="color:green"> Random Image Generator </h2></center>
<h4> Click the button to generate and display random images on the webpage </h4>
<!-- call user-defined getRandomImage function after 2 seconds -->  
<button onclick = "setInterval(getRandomImage, 2000)"> Generate Image </button>
<br> <br>
<span id="result" align="center"> </span> 
  
</body>  
</html>

    

Test it Now

Output

By executing this code, a web page will appear with a Generate Image button. When you click this button, images will start displaying on the webpage randomly.

Click on the Generate Image button to display an image generated randomly. These images will change automatically in every few seconds, once you click on this Generate Image button.

See the output below:

"Remember that we have provide the image address in array from the internet. We have not downloaded or stored these images in our database".

Example 2: Generate multiple random images

In this example, we will generate and display multiple random images at once when the user clicks on a button. We will create a button using the HTML code name Generate Image. These images will be stored in an array which is selected by the user. Each time when a user will click this Generate Image button, five random images in bulk will generate and display on the webpage.

See the steps below, how this will be done:

Declare an array using JavaScript and provide the link or URL of images in that array to store the images.
Use a for loop to generate multiple random images at once. We will use for loop of 0 to 5 to display five images in a single button click.
Put the below steps in this for loop.
Calculate a random number between 0 to length of the array using the floor(Math.random()*randomImage.length) method. This generated number will assign to the images to display randomly.
Now, print all five random images selected using a number calculated in the previous step.
Put all the above steps in a user-defined function (getRandomImage), which will call by clicking on a Generate Image

Convert these steps into actual implementation and look at the code below:

Copy Code

     <html>
<head> 
<title> Random Image Generator </title>
</head>
<script>
function getRandomImage() {
//declare an array to store the images
var randomImage = new Array();

//insert the URL of images in array
randomImage[0] = "https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg";
randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";
randomImage[2] = "https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg";
randomImage[3] = "https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg";
randomImage[4] = "https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg";
randomImage[5] = "https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg";

//loop to display five randomly chosen images at once
for (let i=0; i< 5; i++) {
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*randomImage.length);
//print the images generated by a random number
document.getElementById("result").innerHTML += '<img src="'+ randomImage[number] +'" style="width:150px" />';
}
}

</script>
<body>
<center><h2 style="color:green"> Random Image Generator </h2></center>
<h4> Click the button to generate and display the five random images: </h4>
<!-- call user-defined getRandomImage function to generate image -->  
<button onclick = "getRandomImage()"> Generate Image </button>
<br> <br>
<span id="result" align="center"> </span> 
  
</body>  
</html>

    

Test it Now

Output

By running the above code, you will get the response along with a Generate Image button. Initially, there will be no image.

When you click this Generate Image button, five images selected randomly will display to you on the web.

Again, click on the Generate Image button, five more images will display randomly again with the previous output.

Approach 2

In this approach, we will display the random images every time by clicking on a button. These images will not change automatically as in previous approach.

In this example, we will also provide the size (height and width) for each image to display on the webpage. So, the images will be displayed in size specified by you in the JavaScript code.

Steps for random image generator

Create a user-defined function randomImageGenerator() and put all the below steps inside it.
Create an array of images using JavaScript containing the location/URL, height, and width of the image to be displayed on the webpage.
Store the URL, height, and width of the images in another array index.
Generate a random number using floor() method that will use the array of images to display on the webpage randomly. It will generate a random number between 0 to the length of the array that will be assigned to the images to display randomly.
Display the image whose index number matches with the random number generated in previous step.
We will use a method to remove the previous image and override with the new image.
Create a button in HTML to change the images.

Convert these steps into actual implementation and look at the code below:

Copy Code

     <html>
<head>
<title>Display random images</title>
<style>
body {
margin-top: 30px;
}
</style> 
</head>

<script>
function displayRandomImages() 
{
   //array of images with image location, height, and width
   var imageArray = [
   { 
     //address URL of the image
     src: "https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg",
     //size for the image to be display on webpage
     width: "280",
     height: "200"
   }, 
   {
     src: "https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg",
     width: "320",
     height: "195"
   }, 
   {
     src: "https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg",
     width: "320",
     height: "195"
   },
   {
     src: "https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg",
     width: "350",
     height: "250"
    } ];
    
    //find the length of the array of images
    var arrayLength = imageArray.length;
    var newArray = [];
    for (var i = 0; i < arrayLength; i++) {
        newArray[i] = new Image();
        newArray[i].src = imageArray[i].src;
        newArray[i].width = imageArray[i].width;
        newArray[i].height = imageArray[i].height;
    }
   
  // create random image number
  function getRandomNum(min, max) 
  {
      // generate and return a random number for the image to be displayed 
      imgNo = Math.floor(Math.random() * (max - min + 1)) + min;
      return newArray[imgNo];
  }  

  // 0 is first image and (preBuffer.length - 1) is last image of the array
  var newImage = getRandomNum(0, newArray.length - 1);
 
  // remove the previous images
  var images = document.getElementsByTagName('img');
  var l = images.length;
  for (var p = 0; p < l; p++) {
     images[0].parentNode.removeChild(images[0]);
  }
  // display the new random image  
  document.body.appendChild(newImage);
}
</script>

<body>
<div>
<center>
<h2 style="color:green"> Random Image Generator </h2>
<h4> Press the button to display and change the image </h4>
<button onclick="displayRandomImages();"> Display Images </button>
</center> 
</div>
</body>
</html>

    

Test it Now

Output

By executing this code, a web page will appear with a Display Image button. Click this button to generate an image.

See an image is displayed randomly by clicking on the Display Images button.

Every time when you click on this Display Images button, a new image will show you.

We will explain the above JavaScript code step by step for more easy understanding.

Declare and initialize an array

Declare an array and store the address, height, and width of the image to display on the web.

     var imageArray = [
   { 
     //address URL of the image
     src: "https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg",
     //size for the image to be display on webpage
     width: "280",
     height: "200"
   }, 
   {
     src: "https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg",
     width: "320",
     height: "195"
   }];

    

Store the image URL, height, and width to another array index

This code is used to store the image URL, height, and width of the image to another array index so that they can be accessed easily. Therefore, we will find the length of the initial array and transfer their element to another new array.

         //find the length of the array of images
    var arrayLength = imageArray.length;
    var newArray = [];
    for (var i = 0; i < arrayLength; i++) 
   {
        newArray[i] = new Image();
        newArray[i].src = imageArray[i].src;
        newArray[i].width = imageArray[i].width;
        newArray[i].height = imageArray[i].height;
    }

    

Generate a Random Number

This will generate a random number between 0 to the length of the array.

     function getRandomNum(min, max) 
  {
      // generate and return a random number for the image to be displayed 
      imgNo = Math.floor(Math.random() * (max - min + 1)) + min;
      return newArray[imgNo];
  }  

  // 0 is first image and (preBuffer.length - 1) is last image of the array
  var newImage = getRandomNum(0, newArray.length - 1);

    

Remove the previous image

This code is used to remove the previous image from the web so that the new image can display.

     // remove the previous images
  var images = document.getElementsByTagName('img');
  var l = images.length;
  for (var p = 0; p < l; p++) {
     images[0].parentNode.removeChild(images[0]);
  }

    

Display the image

Finally, we have used this code to display the image after removing the previous image.

     // display the new random image  
  document.body.appendChild(newImage);

Next TopicHow to add object in array using JavaScript

← prev next →

Hot Tutorials

HTML/CSS

JavaScript

Backend language

Development Framework

Database

Mobile development

Development tools

Big Data

XML Tutorial

Contact US

Email:jjw.quan@gmail.com

JavaScript Tutorial

JavaScript Basics

JavaScript Objects

JavaScript BOM

JavaScript DOM

JavaScript Validation

JavaScript OOPs

JavaScript Cookies

JavaScript Events

Exception Handling

JavaScript Misc

JavaScript Advance

Differences

Questions

Interview Questions

Random image generator in JavaScript

Approach 1

Steps for random image generator

Example 2: Generate multiple random images

Approach 2

Steps for random image generator

Hot Tutorials

Python tutorial

Vue.js Tutorial

HTML Tutorial

Java Tutorial

PHP Tutorial

Spring Tutorial

JavaScript Tutorial

CSS Tutorial

jQuery Tutorial

SQL Tutorial

C Tutorial

HTML/CSS

HTML Tutorial

HTML5 Tutorial

CSS Tutorial

Bootstrap Tutorial

JavaScript

JavaScript Tutorial

Vue.js Tutorial

ReactJS Tutorial

jQuery Tutorial

Node.js Tutorial

TypeScript Tutorial

AngularJS Tutorial

JSON Tutorial

Ajax Tutorial

ES6 Tutorial

Angular 7 Tutorial

jQuery UI Tutorial

Backend language

Python tutorial

Java Tutorial

Node.js Tutorial

PHP Tutorial

Go Tutorial

C Tutorial

C++ Tutorial

C# Tutorial

Ruby Tutorial

JSP Tutorial

JSTL Tutorial

ASP.NET Tutorial

Perl Tutorial

Scala Tutorial

VBA Tutorial

Development Framework

Spring Tutorial

Spring Boot Tutorial

Django Tutorial

Servlet Tutorial

Struts 2 Tutorial

Hibernate Tutorial

Solr Tutorial

Database

SQL Tutorial

MySQL Tutorial

Oracle Tutorial

SQL Server Tutorial