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

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

Print Friendly, PDF & Email
Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón
Valora esta entrada
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!

Entradas relacionadas:

Scope de las variables en javascript
- 240
En esta entrada vamos a hablar sobre el ámbito (scope) de las variables en javascript. Voy a suponer que ya sabes declarar y usar funciones y que  también tienes claro el concepto de variable y su sin...
La etiqueta noscript
- 248
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
Sintaxi y gramática básica de las variables en javascript
- 176
Javascript es un lenguaje. Tiene una sintaxis y una gramática básicas que hay que aprender. Vemos cuales son estas normas para el caso de las variables en JS y dónde debes hacer hincapié en no equivoc...
Ejercicio – Corrige los errores (concepto acoplamiento javascript)
- 100
Ejercicio javascript en el que se repasa el concepto de acoplamiento y se piden corregir algunos errores típicos.
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
El Document object model (DOM) de Javascript
- 256
El DOM es un tipo especial de objeto que esquematiza las relaciones y interacciones entre los nodos de un documento web y que es creado por el navegador cada vez que interpreta una página web. Cada et...
Palabras reservadas que no se deben usar para declarar variables
- 166
Listado de palabras reservadas en Javascript de acuerdo con el último stándard ECMA Script 6.
Onresize window para calcular el width y el height disponibles
- 256
Explicamos como podemos obtener el ancho y la altura real disponibles de la ventana del navegador mediante Javascript puro y con jQuery
Acceder y modificar una web con javascript
- 332
Vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web. Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los met...
Introducción a la lógica de programación: if y for
- 533
Hasta el momento hemos estado programando mediante secuencias de instrucciones que se iban sucediendo en orden cronológico. Hemos aprendido la sintaxis y vocabulario mínimo necesario del lenguaje java...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.