Javascript 事件处理程序在单击时重复数组

我正在创建一个将图像添加到图库的东西，这是用户填写文本字段并单击按钮的结果

添加新图像url时，它会添加到包含每个图像url的数组中

问题在于，每次添加新图像时，添加图像的函数都会创建一个新数组

我试图弄清楚如何将图像添加到返回的第一个数组中，或者如何删除前一个数组

以下是HTML：

<header id="header">
  <h1 id="title">jgdGalleryMaker</h1>
  <div class="form">
    <label for="image_url">Image URL: </label>
    <input type="text" id="image_url" name="image_url" class="img-input" placeholder="Enter a URL for your gallery image">
    <button type="submit" class="btn img-submit-btn">Add an image to the gallery</button>
    
    <select name="mode" id="gallery-mode">
      <option>View Gallery</option>
      <option>Edit Gallery</option>
    </select>
  </div>
</header>
<div id="gallery-container">
  <div class="jgd-gallery">
    
  </div>
</div>

jgdGalleryMaker
图像URL:
将图像添加到库中
观景廊
编辑库

…和JavaScript（到目前为止）：

让imgBtn=document.querySelector（“.img提交btn”）；
let gallery=document.querySelector（“.jgd gallery”）；
让galImgsArray=[]；
gallery.innerHTML=galImgsArray；
函数addimgile（）{
让imgURL=document.getElementById（“图像url”）.value；
加利姆格萨雷。反移位（imgURL）；
控制台日志（galImgsArray）；
for（设i=0；i

我也在下面的代码笔中对此进行研究：

---

在迭代数组之前，只需清除库中的HTML即可。当前解决方案的问题在于，不是每次单击按钮时都添加1个新图像，而是添加数组的整个内容，而不覆盖已有的内容。行

gallery.innerHTML='

在迭代数组并将每个图像添加到库中之前清除先前的内容

function addImgTile() {
  let imgURL = document.getElementById("image_url").value;
  galImgsArray.unshift(imgURL);
  console.log(galImgsArray);
  
  gallery.innerHTML = ''; // This line empty the inner HTML of this element
  for (let i = 0; i < galImgsArray.length; i++) {
    gallery.innerHTML += '<figure class="jgd-gallery__image"><a href="' + galImgsArray[i] + '"><img src="' + galImgsArray[i] + '" /></a></figure>';
  }
}

函数addimgile（）{
让imgURL=document.getElementById（“图像url”）.value；
加利姆格萨雷。反移位（imgURL）；
控制台日志（galImgsArray）；
gallery.innerHTML=''；//此行清空此元素的内部HTML
for（设i=0；i

这很有效！看起来这会清除上一个数组。谢谢你的解决方案。

function addImgTile() {
  let imgURL = document.getElementById("image_url").value;
  galImgsArray.unshift(imgURL);
  console.log(galImgsArray);
  
  gallery.innerHTML = ''; // This line empty the inner HTML of this element
  for (let i = 0; i < galImgsArray.length; i++) {
    gallery.innerHTML += '<figure class="jgd-gallery__image"><a href="' + galImgsArray[i] + '"><img src="' + galImgsArray[i] + '" /></a></figure>';
  }
}