'image generator problems. how do i remove the previous image?

I need help with my project. I am new to coding but am learning very quick. I have a random image generator but every time I click the button I want the images previously generated to be replaced with the new ones. right now the generator just adds two more images every time I click the button. My goal is that every time I click the button two new random images appear taking the place of the two before. Thanks for the help! here is my code below but i have redacted the images because i wish to keep them private for now.i put the original puppies in place of the real images.

document.getElementById('button').onclick = function () {
    //declare an array to store the images  
  var randomImage = [];  

  //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" />`;  
  }  
}
<html>  
<head>   
<title> Random Image Generator </title>  
</head>  
<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 id="button">Generate Image</button>
<br> <br>  
<span id="result" align="center"> </span>   
    
</body>    
</html>
javascripthtml


Solution 1:[1]

In order to clear the images before generating a new set, you have to clear the result span element. Also, I adjusted the code below to declare the images in the array and created a reference to the element outside of the function to minimize the tasks being done in the function.

//declare an array to store the images  
var randomImage = new Array(5);
var imageHolder = document.getElementById("result");

//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";

function getRandomImage() {
  // Clear the imageHolder innerHTML first
  imageHolder.innerHTML = "";
  //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  
    imageHolder.innerHTML += '<img src="' + randomImage[number] + '" style = "width:150px" / > ';
  }
}
<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>

Solution 2:[2]

As @phentnil describes in the answer. What you really need to do is to clean your elements before generating the next new ones.

imageHoder.innerHTML = ""

Also, be aware of that innerHTML will be one of the main security issue if you do not prevent or check any script injected inside it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 phentnil
Solution 2 Jabou

Related Questions