图片点击添加边框功能异常：批量绑定点击事件失败并报错

问题分析 #

那个cannot set property 'border' of undefined报错的核心原因是你在点击事件处理函数里没有正确获取到当前被点击的图片元素——要么是你用了错误的方式引用元素（比如数组索引越界、DOM选择器没拿到正确集合），要么是事件绑定过程中this指向出了问题，导致你试图给一个undefined的对象设置border属性。

解决方案 #

下面给你两种可行的原生JS实现方案，分别适合不同场景：

方案1：直接给每个图片绑定点击事件（适合固定数量的图片）

先获取所有图片元素，然后循环给每个元素绑定点击事件，在事件函数里用this直接指代当前被点击的图片：

<div id="pic-container">
  <img class="dogImg" src="img/dog1.jpg">
  <img class="dogImg" src="img/dog2.jpg">
  <img class="dogImg" src="img/dog3.jpg">
</div>

<script>
// 获取所有带dogImg类的图片
const dogImages = document.querySelectorAll('.dogImg');

// 定义点击后的样式切换函数
function toggleImageBorder() {
  // 如果需要「单选」（只有当前点击的图片有边框），先移除所有图片的边框
  dogImages.forEach(img => img.style.border = 'none');
  // 给当前点击的图片添加边框样式
  this.style.border = '3px solid #2196F3';
}

// 给每个图片绑定点击事件
dogImages.forEach(img => {
  img.addEventListener('click', toggleImageBorder);
});
</script>

如果需要「多选」（点击多个图片都保留边框），只需要去掉移除所有边框的那行代码，改成切换当前图片的边框状态：

function toggleImageBorder() {
  // 切换边框：如果已有边框就移除，没有就添加
  this.style.border = this.style.border ? 'none' : '3px solid #2196F3';
}

方案2：事件委托（适合大量图片或动态添加图片的场景）

不用给每个图片单独绑定事件，而是把事件绑定到父容器pic-container上，通过事件冒泡来判断点击的是图片元素。这种方式性能更好，而且后续动态添加的图片也能自动触发点击事件：

<div id="pic-container">
  <img class="dogImg" src="img/dog1.jpg">
  <img class="dogImg" src="img/dog2.jpg">
  <img class="dogImg" src="img/dog3.jpg">
</div>

<script>
const picContainer = document.getElementById('pic-container');

picContainer.addEventListener('click', function(e) {
  // 确认点击的是目标图片元素
  if (e.target.classList.contains('dogImg')) {
    // 单选逻辑：移除所有图片边框
    document.querySelectorAll('.dogImg').forEach(img => img.style.border = 'none');
    // 给当前点击的图片加边框
    e.target.style.border = '3px solid #2196F3';
  }
});
</script>

为什么你之前会报错？ #

大概率是你之前的代码存在以下问题之一：

• 用getElementsByClassName获取元素后，没有正确转换为数组就直接用索引访问，导致索引越界拿到undefined；
• 绑定事件时用了内联onclick="picStyle(i)"的方式，由于闭包问题，i最终会变成数组的最后一个索引，当点击图片时访问了不存在的元素；
• 事件处理函数里没有正确引用当前元素，比如错误地用了全局变量或者其他未定义的变量来指代图片。

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