Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón

Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón

En este ejercicio vamos a modificar los atributos de un nodo del documento web mediante javascript

Vamos a usar los siguientes conceptos.

  • Llamar un nodo mediante document.getElementsByTagName().
  • Vamos a usar el conocido servicio de internet lorempixel.com
  • Vamos a modificar un atributo por acceso directo al «src» o mediante setAttribute()

Te recomiendo esta lectura.

Vamos a repasarlo mediante un ejercicio.

Enunciado

Dado el siguiente código html completa el script para que cada vez que se haga clic en el botón se cargue una nueva imagen de 400px de ancho por 400px de alto.

NOTA: http://lorempixel.com es un conocido servicio de internet que devuelve imágenes aleatorias cada vez.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="author" content="Francesc Ricart">
        <title>Ejercicio js - imágenes aleatorias</title>
        
    </head>
    <body>
        
    <img>
    <button onclick="imagenAleatoria()">Generar imagen</button>
    
    <script>
        
    function imagenAleatoria(){
    //resolución del ejercicio a rellenar 
    }
        
    </script>

    </body>
</html>
Ver solución (Haz clic)

Solución del ejercicio

Este ejercicio es en realidad muy sencillo.

Simplemente debemos

  1. Identificar y acceder al nodo. Una buena práctica es  guardarlo en una variable.
  2. Acceder al atributo src. Podemos hacerlo de dos formas (observarlas comentadas en el código de la función imagenAleatoria().
  3. Modificar la url existente por una de nuestro interés.
  4. Esperar a que cargue la imagen, suele tardar un poco.
  5. Si tarda demasiado activar la consola del navegador para detectar posibles errores.

¿Como queda el documento html?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="author" content="Francesc Ricart">
        <title>Ejercicio js - imágenes aleatorias</title>
        
    </head>
    <body>
        
    <img>
    <button onclick="imagenAleatoria()">Generar imagen</button>
    
    <script>
        
    function imagenAleatoria(){
        var url = "http://lorempixel.com/400/400/"
        document.getElementsByTagName("img")[0].src=url;
        //document.getElementsByTagName("img")[0].setAttribute("src",url)
    }
        
    </script>

    </body>
</html>

¡Hola!

Querido lector,

Este ejercicio javascript nos ha servido para practicar la inserción y/o modificación de atributos de una etiqueta HTML de un modo muy simple.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.