从输入替换为新图像动态创建的图像

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