CODEWITHSUNDEEP
javascripthtml
newcoder
newcoder

Reputation: 13

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>

Upvotes: 1

Views: 115

Answers (2)

Matsu
Matsu

Reputation: 333

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.

Upvotes: 0

phentnil
phentnil

Reputation: 2279

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>

Upvotes: 1

Related Questions