图像生成器问题。 我如何删除以前的图像？
[英]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>
2 个解决方案
解决方案1
1 已采纳 2022-03-18 07:00:37
In order to clear the images before generating a new set, you have to clear the result span element.为了在生成新集之前清除图像，您必须清除result跨度元素。 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.此外，我调整了下面的代码以声明数组中的图像并创建了对 function 外部元素的引用，以最大限度地减少 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>
解决方案2
0 2022-03-18 07:08:55
As @phentnil describes in the answer.正如@phentnil 在答案中所描述的那样。 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.此外，请注意，如果您不阻止或检查注入其中的任何脚本，innerHTML 将成为主要的安全问题之一。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.