JavaScript技术求助：实现点击图库图片存入数组的功能

你现有代码存在几个关键问题，先修正再实现需求：

• 所有图片用了相同的id="ggg"，getElementById只会获取页面中第一个匹配的元素，导致循环里一直在操作同一张图片，最后页面只会显示一张图。
• 缺少存储选中图片的数组，以及点击时将图片存入数组的逻辑。

修正后的代码实现 #

HTML部分

把重复的id去掉，改用一个容器承载图片：

<div id="gallery"></div>
<div id="text"></div>

JavaScript部分

// 声明数组用于存储选中的图片
let selectedImages = [];

const gallery = document.getElementById('gallery');

for(let i = 0; i < 5; i++) {
  // 动态创建每个img元素
  const img = document.createElement('img');
  img.src = `https://picsum.photos/200/301?id=${i}`;
  // 给图片加间距方便点击
  img.style.margin = '10px';
  gallery.appendChild(img);

  // 添加点击事件
  img.addEventListener("click", function() {
    // 判断当前图片是否已在数组中（避免重复存入）
    if (!selectedImages.includes(this)) {
      selectedImages.push(this);
      document.getElementById("text").innerHTML = `已选中 ${selectedImages.length} 张图片`;
    } else {
      // 支持取消选中：从数组中移除当前图片
      selectedImages = selectedImages.filter(item => item !== this);
      document.getElementById("text").innerHTML = `已选中 ${selectedImages.length} 张图片`;
    }
    // 控制台查看数组内容，方便调试
    console.log('选中的图片数组:', selectedImages);
  })
}

代码说明 #

1. 先创建空数组selectedImages，专门存放用户点击选中的图片元素。
2. 循环内动态创建每个img元素，避免重复id问题，将图片添加到gallery容器中。
3. 点击事件里用this指代当前被点击的图片：
   • 先判断图片是否已在数组中，未存在则存入数组；已存在则移除（实现取消选中功能）。
   • 更新文本区域显示选中数量，让用户直观看到结果。
   • 控制台打印数组，方便调试查看存储内容。

如果你的需求是存储图片地址（src）而非图片元素本身，只需把selectedImages.push(this)改成selectedImages.push(this.src)，判断重复的逻辑也对应改为检查src是否存在即可。

内容的提问来源于stack exchange，提问作者jacob_1986