圖像生成器問題。我如何刪除以前的圖像？

Question

我的項目需要幫助。 我是編碼新手，但學得很快。 我有一個隨機圖像生成器，但每次單擊按鈕時，我都希望以前生成的圖像被新圖像替換。 現在，每次我單擊按鈕時，生成器都會再添加兩個圖像。 我的目標是每次單擊按鈕時，都會出現兩個新的隨機圖像，以取代之前的兩個圖像。 謝謝您的幫助。 下面是我的代碼，但我已經編輯了圖像，因為我希望暫時將它們保密。我用原來的小狗代替了真實的圖像。

 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>

Answer 1

為了在生成新集之前清除圖像，您必須清除result跨度元素。 此外，我調整了下面的代碼以聲明數組中的圖像並創建了對 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>

Answer 2

正如@phentnil 在答案中所描述的那樣。 你真正需要做的是在生成下一個新元素之前清理你的元素。

imageHoder.innerHTML = ""

此外，請注意，如果您不阻止或檢查注入其中的任何腳本，innerHTML 將成為主要的安全問題之一。

圖像生成器問題。我如何刪除以前的圖像？

問題描述

2 個解決方案

解決方案1
1 已采納 2022-03-18 07:00:37

解決方案2
0 2022-03-18 07:08:55

圖像生成器問題。 我如何刪除以前的圖像？

問題描述

2 個解決方案

解決方案1 1 已采納 2022-03-18 07:00:37

解決方案2 0 2022-03-18 07:08:55

圖像生成器問題。我如何刪除以前的圖像？

解決方案1
1 已采納 2022-03-18 07:00:37

解決方案2
0 2022-03-18 07:08:55