点击图片调用classList.toggle报Uncaught TypeError错误如何解决

错误原因 #

• document.getElementsByClassName() 方法返回的是HTMLCollection类数组集合，而非单个DOM元素，集合本身不存在classList属性，因此调用classList.toggle时就会抛出你遇到的类型错误。

解决方案 #

场景1：页面仅存在一组点击展开结构

直接获取单个.boxes元素即可，两种修改方式二选一：

1. 保留getElementsByClassName写法，取集合第一个元素：

const plusbtn = document.querySelector(".btn-img");
// 取集合下标为0的第一个DOM元素
const drop = document.getElementsByClassName("boxes")[0];

plusbtn.addEventListener('click', () => {
  drop.classList.toggle("box-drop");
})

2. 改用querySelector直接获取单个元素，写法更统一：

const plusbtn = document.querySelector(".btn-img");
const drop = document.querySelector(".boxes");

plusbtn.addEventListener('click', () => {
  drop.classList.toggle("box-drop");
})

场景2：后续会新增多组点击展开结构

如果页面有多个btn-img和对应的boxes，需要绑定所有按钮的点击事件，同时精准匹配当前点击按钮对应的展开区域，避免点击一个按钮所有区域都展开：

// 获取所有展开按钮
const plusBtns = document.querySelectorAll(".btn-img");

plusBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 找到当前按钮父级容器下对应的boxes元素
    const currentDrop = btn.closest('.box1').querySelector('.boxes');
    currentDrop.classList.toggle("box-drop");
  })
})

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