Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

264
Vistas
Mi Imagen Modal no funciona después de cambiar de ID a Clase

Tengo un modal de imagen y lo tenía en la imagen de ID que obviamente no funcionó, así que cambié id a class y ahora el modal de imagen no funciona en absoluto y no puedo ver qué tiene de malo. Se agradece toda y cualquier ayuda.

Modalidad HTML

 <div id="myModal" class="modal"> <span class="close">x</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div>

Imagen PHP

 "<tr><td><img class='myImg' src='" . $fileName . "' alt=' ". $obj->Description . "' width='50px'>" .

JavaScript

 var modal = document.getElementById("myModal"); var img = document.getElementsByClassName("myImg"); for(var i=0; i<img.length; i++){ var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img[i].addEventListener = ('click', function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; }) } var span = document.getElementsByClassName("close")[0]; document.addEventListener("keydown", function(event) { const key = event.key; if (key === "Escape") { modal.style.display = "none"; } }) span.onclick = function() { modal.style.display = "none"; }
over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

El detector de eventos de clic en el ciclo for es incorrecto. Actualmente está asignando la función de devolución de llamada al método addEventListener .

 img[i].addEventListener = ('click', function(){

Esto debería ser:

 img[i].addEventListener('click', function() {
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda