JavaScript使用getElementsByClassName获取点击图片src报undefined问题求助

你的代码存在4个核心错误，导致报错和功能不符合预期：

• 循环使用var声明迭代变量i，触发点击事件时循环已经跑完，i等于所有img元素的总长度，img[i]取值为undefined，赋值给preview的src后自然请求到undefined路径报错。
• 循环起始值设为1，跳过了索引为0的第一个皮肤素材，第一个选项无法触发点击事件。
• 点击事件中取值逻辑错误：img是所有带img类的元素集合，本身没有src属性；赋值时你直接把img[i]元素对象赋值给了preview.src，而非取元素的src属性值。
• 现有预览区只有1个img元素，无法满足皮肤、眼睛、嘴巴三层素材叠加的需求。

1. 调整HTML预览区结构 #

把原来的单img改成三个分层img，叠加显示：

<div id="preview" style="position:relative;width: 200px;height: 200px;">
  <!-- 底层：皮肤层 -->
  <img id="preview-skin" src="" alt="" style="position:absolute;z-index:1;width:100%;height:100%;">
  <!-- 中层：眼睛层 -->
  <img id="preview-eyes" src="" alt="" style="position:absolute;z-index:2;width:100%;height:100%;">
  <!-- 顶层：嘴巴层 -->
  <img id="preview-mouth" src="" alt="" style="position:absolute;z-index:3;width:100%;height:100%;">
</div>

2. 替换原有JS代码 #

// 分别获取三个预览层元素
const previewSkin = document.getElementById('preview-skin')
const previewEyes = document.getElementById('preview-eyes')
const previewMouth = document.getElementById('preview-mouth')
// 获取所有可选素材
const allImgs = document.getElementsByClassName('img')

// 循环绑定点击事件，用let声明i形成块级作用域，起始值从0开始
for (let i = 0; i < allImgs.length; i++) {
  allImgs[i].addEventListener("click", function() {
    // 取当前点击元素的src和父级卡片，判断素材类型
    const currentSrc = this.getAttribute('src')
    const parentCard = this.closest('.card')
    
    // 根据卡片类名判断素材类型，赋值到对应预览层
    if (parentCard.classList.contains('c1')) {
      // 皮肤类
      previewSkin.src = currentSrc
    } else if (parentCard.classList.contains('c2')) {
      // 眼睛类
      previewEyes.src = currentSrc
    } else if (parentCard.classList.contains('c3')) {
      // 嘴巴类
      previewMouth.src = currentSrc
    }
  })
}

• 用let声明循环迭代变量i，每个循环生成独立的块级作用域，避免闭包导致的取值错误。
• 用this直接获取当前点击的元素，无需通过索引取值，逻辑更稳定。
• 通过父级卡片的类名区分素材类型，分别赋值到三层预览元素，实现图层叠加效果。
• 循环从索引0开始，不会遗漏第一个素材选项。

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