Here is the code:

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");
  })
}

Error:

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

Here is the code:

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");
  })
}

Error:

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

• javascript
• dom

• I suspect this snippet code doesn't reflect correctly with the error since togle is different from toggle. So please make sure you copy & paste the accurate snippet from your code. – tmhao2005 Commented Aug 6, 2020 at 6:04

2 Answers 2

If you are using a querySelectorAll, you will get an HTML collection, therefore you will need to iterate through it's elements to toggle a class. It's faster to target by if you want to toggle only one element, but if you need to toggle more than one, your code would look something like this

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

document.querySelectorAll returns a NodeList with array-like data structure. Hence, modal is an array with no classList property. Use document.getElementById; it's faster anyways:

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