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

Question

由于用户填写文本字段并单击按钮，我正在创建一些将图像添加到图库的内容。

当一个新的图片 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>

...和 ​​JavaScript（到目前为止）：

let imgBtn = document.querySelector(".img-submit-btn");
let gallery = document.querySelector(".jgd-gallery");

let galImgsArray = [];

gallery.innerHTML = galImgsArray;

function addImgTile() {
  let imgURL = document.getElementById("image_url").value;
  galImgsArray.unshift(imgURL);
  console.log(galImgsArray);
  
  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>';
  }
}

imgBtn.addEventListener('click', addImgTile);

我也在下面的 Codepen 中处理这个问题： jgdGalleryMaker Codepen

Answer 1

您只需要在遍历数组之前清除图库的 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>';
  }
}