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> 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>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.