-1

Quiero capturar cual de las imágenes fue pulsada para así en el visor poder cambiar la imagen y el figcaption. Pero debo hacerlo con los eventos de campo semántico y sin tocar el html que ya tengo.

Es decir, que sea con el window.onload y capture en cual de las imágenes esta haciendo el onclick.

Gracias.

window.onload = function() 
{
  let elemento = document.querySelectorAll("aside > img");
  elemento.onclick = function()
  {
    cambiarImagen(this);
  }

  function cambiarImagen(param)
  {
    document.getElementsByTagName("img")[5].src = param.src;
    document.getElementsByTagName("figcaption")[0].innerHTML = param.alt;
  }
}
<html>
  <body>
    <h1>Visor de imágenes</h1>
    <aside id="parte_lateral">
      <img src="imagen1.jpeg" alt="Descripción imagen 1">
      <img src="imagen2.jpg" alt="Descripción imagen 2">
      <img src="imagen3.jpg" alt="Descripción imagen 3">
      <img src="imagen4.jpg" alt="Descripción imagen 4">
      <img src="imagen5.jpg" alt="Descripción imagen 5">
    </aside>
    <section id="parte_central">
      <figure>
        <img src="imagen1.jpeg" alt="Descripción imagen 1">
        <figcaption>Descripción imagen 1</figcaption>
      </figure>
    </section>
  </body>
</html>

1
  • No entiendo muy bien la pregunta, pero porque no intentas agregar una propiedad o atributo con cierto nombre que diferencie la imagen, y a la hora de dar clic obtienes ese valor para comparar. Commented el 13 nov. 2019 a las 17:01

2 respuestas 2

2

Al seleccionar con .querySelectorAll se está creando un array de las etiquetas seleccionadas, por lo tanto debes recorrer dicho array, en este caso uso un forEach después se le asigna el evento onclick a cada iteración, cualquier duda hazla saber.

let elementosImg = document.querySelectorAll("#parte_lateral img");

  
       elementosImg.forEach(img=>{
       
     
       img.onclick = function(){
       document.getElementsByTagName("img")[5].src = this.src;
       document.getElementsByTagName("img")[5].alt = this.alt;
				document.getElementsByTagName("figcaption")[0].innerHTML = this.alt;
       
       }
     
       }) 
<html>
<body>
	<h1>Visor de imágenes</h1>
	<aside id="parte_lateral">
		<img src="imagen1.jpeg" alt="Descripción imagen 1">
		<img src="imagen2.jpg" alt="Descripción imagen 2">
		<img src="imagen3.jpg" alt="Descripción imagen 3">
		<img src="imagen4.jpg" alt="Descripción imagen 4">
		<img src="imagen5.jpg" alt="Descripción imagen 5">
	</aside>
	<section id="parte_central">
		<figure>
			<img src="imagen1.jpeg" alt="Descripción imagen 1">
			<figcaption>Descripción imagen 1</figcaption>
		</figure>
	</section>
</body>

</html>

4
  • Muchas gracias, es exactamente lo que quería para el ejercicio. Commented el 13 nov. 2019 a las 17:24
  • No hay de que! Excelente día. :) Commented el 13 nov. 2019 a las 17:25
  • Perdona una pregunta. esta sentencia elementosImg.forEach(img=> no la entiendo muy bien. Estoy acostumbrado a hacer foreach más "normales". En plan for (variable in objeto) { ... } Commented el 13 nov. 2019 a las 17:30
  • Aquí hay información de cómo funciona el forEach Commented el 13 nov. 2019 a las 18:02
0

No entiendo el porque de tus requerimientos pero aqui esta:

 document.querySelectorAll('aside > img').forEach(
  el => {
    el.addEventListener('click', (e) => {
        console.log('your clicked element', e.srcElement);
        this.changeImage(e.srcElement); // funcion que cambia la imagen
      }
    );
  });

Con query selector seleccionas todos los elementos img del documento, luego por cada elemento seleccionado anades un "escuchador" por cada click en dicho elemento. Entonces cuando se produce el click obtienes la propiedad del elemento que en este caso es e.srcElement puedes verlo accediendo a la consola de desarrollador de tu browser.

3
  • Serviría que explicaras un poco más sobre lo que estás haciendo y por qué lo haces así para que haya un mejor entendimiento
    – DaxTter77
    Commented el 13 nov. 2019 a las 17:06
  • Es que es un ejercicio de clase y tampoco sabia mucho más que explicar y además me dice el profe que sin el addEventListener ya que aun no lo hemos dado jeje. Commented el 13 nov. 2019 a las 17:15
  • entonces tienes que estudiar mas porque solo tu sabes las funciones que te han ensenado en clases
    – Ton cs
    Commented el 14 nov. 2019 a las 8:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.