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

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>';
  }
}

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

Event handler is repeating an array on click

javascript

arrays

dom-events