從輸入替換爲新圖像動態創建的圖像

Question

我應該在用戶插入其URL後顯示圖像。它在第一次點擊時效果很好，但是當用戶輸入一個新的URL時，用新的URL替換之前的圖像，而不是在前一個圖像下創建一個新圖像。

這是我的功能至今：

HTML：

<p id="tt">Display an image using the image's URL</p> 
<label>URL: 
    <textarea rows="1" cols="40" placeholder="Image URL" id="url"></textarea> 
</label><br> 
<label>Caption: 
    <textarea rows="1" cols="40" placeholder="Image caption" id="caption"></textarea> 
</label><br> 
<button id="btn">Add Image</button> 
<br> 
<div id="imgDiv"></div> 

JS：

var getBtn = document.getElementById("btn"); 
getBtn.addEventListener('click', function() { 
    var figure = document.createElement("figure"); 
    var image = document.createElement("IMG"); 
    var figcaption = document.createElement("figcaption"); 
    //attributing the input value in the first textarea as source for the image to be displayed 
    var url = document.getElementById("url").value; 
    image.src = url; 
    image.height = "200"; 
    image.id = "newImage"; 
    figure.appendChild(image); 
    //making the image a link to its url 
    var a = document.createElement("a"); 
    a.href = url; 
    a.appendChild(image); 
    figure.appendChild(a); 
    //creating a Node and setting the input value from the second textarea as caption 
    var caption = document.getElementById("caption").value; 
    var text = document.createTextNode(caption); 
    document.getElementById("imgDiv").appendChild(figure); 
    figure.appendChild(figcaption); 
    figcaption.appendChild(text); 
    document.getElementById("menu").add(option); 
    //clear textarea after submitting url and caption 
    document.getElementById("url").value = ""; 
    document.getElementById("caption").value = ""; 
}); 

編輯 - 的jsfiddle：https://jsfiddle.net/hpnLycer/4/

有人可以給我一個提示如何解決這個？ 我試着通過閱讀「類似」的問題來理解，但是我沒有發現任何可以解決我的問題的方法。

無論如何謝謝你。

Answer 1

希望這個片段將是有益的

HTML

<input type ="text" id="imageIp" placeholder="New Image url"> <button id ="changeDisplay" > Change Display </button> 
<div class ="demoDiv" id = "demoDiv"> 
</div> 

CSS

.demoDiv{ 
    margin-top:10px; 
    height:300px; 
    width:300px; 
    background-image: url("http://freebigpictures.com/wp-content/uploads/shady-forest.jpg"); 

JS

var getButton = document.getElementById("changeDisplay"); 
getButton.addEventListener('click',function(){ 
var getNewImage = document.getElementById("imageIp").value; 
console.log(getNewImage); 
document.getElementById("demoDiv").style.backgroundImage = "url('"+getNewImage+"')"; 
}) 

WORKING EXAMPLE

編輯

在最新片段還沒有定義這兩個數組

imageArray 
captionArray 

您需要定義它們，然後才能在推它。我有內容初始化，在開始，但你可以相應地放置它們。但是在將內容放入它之前，它們必須進行初始化。

var getBtn = document.getElementById("btn"); 
var imageArray = []; // Initializing imageArray 
var captionArray=[]; // Initializing captionArray 
getBtn.addEventListener('click', function() { 

// rest of code 

)) 

注：另外，在你的片段有id爲menu沒有HTML元素，所以當我運行此代碼它拋出一個錯誤。

WORKING EXAMPLE WITH SUPPLIED CODE