Question

未捕获的类型错误：无法读取 HTMLImageElement 中未定义的属性“toggle”。<anonymous>

2020-08-06

16767

javascript dom

代码如下：

let imagenes = document.querySelectorAll(".team");
let modal = document.querySelectorAll("#modal");
let img = document.querySelectorAll("#modal__img");
let boton = document.querySelectorAll("#modal__boton");

for (let i = 0; i < imagenes.length; i++){
  imagenes[i].addEventListener("click", function(e){
    modal.classList.togle("modal--open");
  })
}

错误：

Uncaught TypeError: Cannot read property 'toggle' of undefined    at HTMLImageElement.<anonymous>"

Answer 1

如果您使用 querySelectorAll ，您将获得一个 HTML 集合，因此您需要遍历其元素来切换类。如果您只想切换一个元素，则使用会更快，但如果您需要切换多个元素，您的代码将如下所示

const elements = document.quesySelectorAll('.myClass');
elements.forEach(x => x.classList.toggle('otherClass');

Answer 2

document.querySelectorAll 返回具有类似数组数据结构的 NodeList 。因此， modal 是一个没有 classList 属性的数组。使用 document.getElementById ；无论如何它都更快：

let modal = document.getElementById("#modal");