09 Nov 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>Solución del ejercicio
Este ejercicio es en realidad muy sencillo.
Simplemente debemos
- Identificar y acceder al nodo. Una buena práctica es guardarlo en una variable.
- Acceder al atributo src. Podemos hacerlo de dos formas (observarlas comentadas en el código de la función imagenAleatoria().
- Modificar la url existente por una de nuestro interés.
- Esperar a que cargue la imagen, suele tardar un poco.
- 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:
Veamos como podemos deshabitar el envío de un formulario web mediante javascript haciendo uso del evento submit() y preventDefault()
¿Qué es programar? Programar es indicar a una máquina que siga un conjunto ordenado de instrucciones. Es una acción cotidiana que realizamos sin apercibirnos cuando seguimos una receta de cocina. Y si...
Explicamos como desactivar el comportamiento por defecto de un elemento HTML mediante el uso del método javacript preventDefault()
Programa que pide al usuario un número y escribe todas las tablas de multiplicar del 1 al número dado reutilizando código. Incluye solución.
Ejemplo explicado paso a paso para entender el concepto del this en javascript. Se empieza con el javascript en línea en el html para finalmente inicializar los eventos llamándolos directamente desde ...
El término escapar un carácter en Javascript sin duda da un poquito de yuyu. En realidad una palabra poco atractiva para algo muy práctico. El concepto es muy similar al de escapar un carácter en HTML...
Marina Borenstein
Posted at 21:57h, 03 julioBuenas tardes! Muy bueno tu post. Y si quisiera hacerlo con una galería propia de imágenes, como podría hacerlo? Saludos!
Francesc Ricart
Posted at 16:00h, 07 julioHola Marina,
Buena pregunta.
Esta url siempre devuelve una imagen distinta. Pero entiendo que no es lo que tú necesitas.
Para hacerlo en primer lugar escribiría las url de las imágenes en una lista (array).
1) Por ejemplo la variable
imagenes = [url_imagen1, url_imagen2, url_imagen3];
2) a continuación únicamente necesitas generar un número aleatorio. Puedes encontrar en este ejercicio cómo generar un número aleatorio.
3) finalmente únicamente tienes que llamar a
imagenes[i] dónde i es el número aleatorio generado.
PD: otra opción sería llamarlo desde una BBDD junto con php + mysql