使用DOM事件监听器实现点击列表图按序更新横幅图src的功能排查

已发现的代码问题 #

• DOM方法拼写错误：从第8个图片元素开始，全部将标准DOM方法getElementById错写为getElementsById，运行时会直接抛出方法不存在的类型错误，后续事件绑定逻辑直接中断。
• 元素ID匹配错误：查找第二个横幅图片时，代码匹配的id为gekozenAvater2，和HTML中实际idgekozenAvatar2（a、v字母顺序颠倒）不匹配，该变量最终取值为undefined，后续给src属性赋值时会触发报错。
• 事件绑定逻辑错误：所有addEventListener的第二个参数传入的是bannerFunctie(afbeeldingX)的即时执行结果，这行代码在页面加载阶段就会立刻调用一次bannerFunctie，而非等待用户点击触发；且箭头函数无返回值，实际传给监听器的是undefined，用户点击图片的事件完全不会生效。
• 点击计数器逻辑反向：初始设置clickCounter = 1，且函数内第一行就执行clickCounter++，第一次点击时代码会直接将计数器值改为2，永远不会进入“替换第一个横幅图”的分支，和需求逻辑完全相反。
• 代码冗余度过高：12个列表图片逐一获取元素、逐一绑定事件，重复代码占比超80%，后续调整功能时需要逐行修改，维护成本极高。

可直接运行的修正代码 #

// 初始计数器：值为0时，下一次点击将替换第一个横幅图
let clickCounter = 0;
// 获取两个横幅图片元素
let bannerAfbeelding1 = document.getElementById("gekozenAvatar1");
let bannerAfbeelding2 = document.getElementById("gekozenAvatar2");

// 点击处理函数
let bannerFunctie = (clickedImg) => {
  // 完成两次替换后的逻辑预留（对应你代码中的待完善部分）
  if (clickCounter > 1) return;
  // 根据计数器值执行对应替换逻辑
  if (clickCounter === 0) {
    bannerAfbeelding1.src = clickedImg.src;
  } else if (clickCounter === 1) {
    bannerAfbeelding2.src = clickedImg.src;
  }
  // 单次逻辑处理完成后，更新计数器
  clickCounter++;
};

// 批量选中所有列表图片，循环绑定点击事件
document.querySelectorAll(".list-images").forEach(imgEl => {
  imgEl.addEventListener('click', () => bannerFunctie(imgEl));
});

后续优化方向 #

• 用document.querySelectorAll(".list-images")批量选中目标元素，搭配forEach循环完成事件绑定，替代逐行获取元素、逐行绑定的冗余写法，大幅减少重复代码量。
• 牢记事件绑定规则：addEventListener的第二个参数需要传入函数引用，如果绑定过程中需要传递自定义参数，用箭头函数做一层包裹即可，不要直接把带参数的函数调用写在传参位置。
• 计数器类逻辑遵循「先执行业务判断、后更新计数」的顺序，避免逻辑颠倒导致的流程错误。
• 可使用事件委托进一步优化性能：无需给每个列表图片单独绑定事件，仅给父级.image-list容器绑定一次点击事件，利用事件冒泡机制判断点击目标，后续动态新增图片时也无需重新绑定事件，示例写法如下：

document.querySelector(".image-list").addEventListener('click', (e) => {
  // 判断点击目标是否为列表内的图片
  if (e.target.classList.contains('list-images')) {
    bannerFunctie(e.target);
  }
});

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