Skip to main content
Corrección de errores de ortografía y resaltar palabras clave
Origen Enlace

Como ¿Cómo capturar que elemento fue pulsado? JS

quieroQuiero 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.onloadwindow.onload y capture en cual de las imágenes esta haciendo el onclick.

Escribo esto porque no me deja enviarlo con tan poca información xDonclick.

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>

Como capturar que elemento fue pulsado? JS

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.

Escribo esto porque no me deja enviarlo con tan poca información xD.

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>

¿Cómo capturar que elemento fue pulsado? JS

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>

agregando snippet
Origen Enlace
Vick Muñoz
  • 2.9k
  • 1
  • 10
  • 19
    <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>

    <script>
        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;

                    
            }
        }


    </script>

</html>```

    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>

    <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>

    <script>
        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;

                    
            }
        }


    </script>

</html>```

    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>

Origen Enlace

Como capturar que elemento fue pulsado? JS

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.

Escribo esto porque no me deja enviarlo con tan poca información xD.

Gracias.

    <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>

    <script>
        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;

                    
            }
        }


    </script>

</html>```