如何在JavaScript中为多张图片元素应用brightness滤镜？

我帮你梳理下代码里的问题，这几个点导致了滤镜无法正常生效：

核心问题分析 #

• 重复ID属性不符合规范：HTML里的多张图片都用了id="brightness"，但ID在整个页面中必须是唯一的，document.getElementById()只会返回第一个匹配的元素，后面的图片根本不会被选中。
• 未定义的trash变量：你的JS代码直接调用trash.addEventListener，但没有先通过document.getElementById("trash")获取这个按钮元素，浏览器会找不到目标，导致事件绑定失败。
• 图片标签不完整：最后一张图片的src属性没写全，标签也没闭合，可能影响元素识别。

修正后的完整代码 #

HTML部分 #

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet"> 
<div id="trash"> <i class="fas fa-trash"></i> </div> 
<img src="imgs/utensil.svg" alt="utensil" id="utensil" class="brightness"> 
<img src="imgs/straw.svg" alt="straw" id="straw" class="brightness"> 
<img src="imgs/chipbag.svg" alt="chipbag" class="brightness">

JavaScript部分 #

// 先获取垃圾桶按钮元素
const trashBtn = document.getElementById("trash");
// 获取所有需要调整亮度的图片（用class选择器）
const brightnessImages = document.querySelectorAll(".brightness");

// 给按钮绑定点击事件
trashBtn.addEventListener("click", function() {
  // 遍历所有图片，逐个设置brightness滤镜
  brightnessImages.forEach(img => {
    img.style.filter = "brightness(100%)";
  });
});

修正说明 #

1. 把重复的id="brightness"替换成class="brightness"，用document.querySelectorAll()可以一次性选中所有需要处理的图片。
2. 正确获取垃圾桶按钮元素，避免变量未定义的错误。
3. 用forEach遍历图片集合，确保每张图片都能应用滤镜样式。

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