Tengo 3 imágenes en html.
Selecciono las imágenes con querySelectorAll , las convierto en una matriz y:
Paso 1
Los encierro dentro de una etiqueta <div> , agregando una clase .img-container , usando outerHTML .
Paso 2
Agrego un detector de eventos a las imágenes. Cuando se hace clic en las imágenes, la consola registra "se ha hecho clic en img".
Si ejecuto Step1 solo, el código funciona.
Si ejecuto Step2 solo, el código funciona.
Cuando trato de ejecutar tanto el Paso 1 como el Paso 2, el Event Listener (Paso 2) no funciona.
¿Alguna ayuda?
// Select all img tags const allImg = document.querySelectorAll('img'); // ***STEP 1 *** //Enclose imgs in divs (and add img-container class) const allImgArr = Array.from(allImg).map((curr) => curr.outerHTML = '<div class="img-container">' + curr.outerHTML + '</div>' ); // ***STEP 2*** //Click on image to console.log 'img has been clicked' const allImgArrTwo = Array.from(allImg).map((curr) => curr.addEventListener('click', function() { console.log ('img has been clicked') })); .img-container { display: flex; align-items: center; justify-content: center; background-color: red; width: 250px; height: 250px; } <p>Img 1</p> <img src="https://images.pexels.com/photos/574071/pexels-photo-574071.jpeg" width="100" height="100" alt=""> <p>Img 2</p> <img src="https://images.pexels.com/photos/1181676/pexels-photo-1181676.jpeg" width="100" height="100" alt=""> <p>Img 3</p> <img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg" width="100" height="100" alt="">Cambiar outerHTML no es la mejor manera de trabajar con elementos HTML. Cree un nuevo <div> , establezca .className en "img-container" y agregue la imagen dentro del <div> .
demostración completa:
// Select all img tags const allImg = document.querySelectorAll('img'); // ***STEP 1 *** //Enclose imgs in divs (and add img-container class) const allImgArr = Array.from(allImg).map((curr) => { const parent = document.createElement("div"); parent.className = "img-container"; curr.replaceWith(parent); parent.appendChild(curr); return parent; }); // ***STEP 2*** //Click on image to console.log 'img has been clicked' const allImgArrTwo = Array.from(allImg /* change 'allImg' to 'allImgArr' if you want to log when the <div> AND the <img> are clicked */).map((curr) => curr.addEventListener('click', function() { console.log('img has been clicked'); })); .img-container { display: flex; align-items: center; justify-content: center; background-color: red; width: 250px; height: 250px; } <p>Img 1</p> <img src="https://images.pexels.com/photos/574071/pexels-photo-574071.jpeg?cs=srgb&dl=pexels-lukas-574071.jpg" width="100" height="100" alt=""> <p>Img 2</p> <img src="https://images.pexels.com/photos/1181676/pexels-photo-1181676.jpeg?cs=srgb&dl=pexels-christina-morillo-1181676.jpg" width="100" height="100" alt=""> <p>Img 3</p> <img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg" width="100" height="100" alt=""> Editar el lunes 22 de agosto de 2022 11:16:16 GMT + 0200 (hora de verano de Europa Central) : Reemplazado replaceChild con replaceWith (basado en un comentario)
No es necesario agregar detectores de eventos a cada imagen. El uso de la delegación de eventos debería resolver su problema. Eso hace que el segundo paso sea superfluo. El fragmento muestra la delegación de eventos y una forma de crear elementos sin necesidad de outerHTML .
Fork this stackblitz project para jugar con este código.
document.addEventListener(`click`, evt => { if (evt.target.nodeName === `IMG`) { console.clear(); console.log(`image has been clicked`); } }); // No steps needed. // Alternative for creating div.img-container for each image // (avoids outerHTML). document.querySelectorAll('img').forEach( img => img.insertAdjacentElement( `beforebegin`, Object.assign(document.createElement(`div`), {className: `img-container`}) ) .appendChild(img) ); .img-container { display: flex; align-items: center; justify-content: center; background-color: red; width: 250px; height: 250px; } <p>Img 1</p> <img src="//images.pexels.com/photos/574071/pexels-photo-574071.jpeg?cs=srgb&dl=pexels-lukas-574071.jpg" width="100" height="100" alt=""> <p>Img 2</p> <img src="//images.pexels.com/photos/1181676/pexels-photo-1181676.jpeg?cs=srgb&dl=pexels-christina-morillo-1181676.jpg" width="100" height="100" alt=""> <p>Img 3</p> <img src="//images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg" width="100" height="100" alt=""> // Select all img tags const allImg = document.querySelectorAll('img'); //Enclose imgs in divs (and add img-container class) const allImgArr = Array.from(allImg).map((curr) => curr.outerHTML = '<div class="img-container">' + curr.outerHTML + '</div>' ); const allImg1 = document.querySelectorAll('img'); //Click on image to console.log 'img has been clicked' const allImgArrTwo = Array.from(allImg1).map((curr) => curr.addEventListener('click', function() { console.log ('img has been clicked') })); .img-container { display: flex; align-items: center; justify-content: center; background-color: red; width: 250px; height: 250px; } <p>Img 1</p> <img src="https://images.pexels.com/photos/574071/pexels-photo-574071.jpeg?cs=srgb&dl=pexels-lukas-574071.jpg" width="100" height="100" alt=""> <p>Img 2</p> <img src="https://images.pexels.com/photos/1181676/pexels-photo-1181676.jpeg?cs=srgb&dl=pexels-christina-morillo-1181676.jpg" width="100" height="100" alt=""> <p>Img 3</p> <img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg" width="100" height="100" alt="">De lo que obtengo, el problema es que está reemplazando el html externo, por lo que allImg ya no representa esas imágenes, por lo que podría solucionarlo seleccionando allimgs nuevamente y luego agregando el oyente par.