09 Nov Ejercicio JS – Como cargar una imagen aleatoria al clicar un botón
Publicado a las 07:30h en Ejercicios Javascript, Tutorial Javascript. Aprende JS paso a paso y gratis. Apuntes de alumno. 0 Comentarios
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:
La etiqueta noscript
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de scri...
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de scri...
Ejercicio - Acoplamiento de javascript en un documento web
Ejercicio y solución de un problema introductorio al mundo del Javascript.
Ejercicio y solución de un problema introductorio al mundo del Javascript.
Ejercicio - ¿En qué día de la semana estamos?
Problema javascript que devuelve en formato texto el día de la semana en el que esamos. Incluye 2 posibles soluciones con switch() y array.
Problema javascript que devuelve en formato texto el día de la semana en el que esamos. Incluye 2 posibles soluciones con switch() y array.
Ejercicio JS - Ventana emergente control de edad
Ejercicio javascript que regula el control de accesos a una página web según edad del visitante. Incluye solución.
Ejercicio javascript que regula el control de accesos a una página web según edad del visitante. Incluye solución.
Asignación de eventos. Limpiar el html de JS en línea
Ejercicio introductorio a los eventos javascript dónde se limpia un documento html para que no aparezcan eventos en línea con el html mediante addEven...
Ejercicio introductorio a los eventos javascript dónde se limpia un documento html para que no aparezcan eventos en línea con el html mediante addEven...
Como generar una galería de imágenes de producto con javascript
Ejemplo académico de como hacer con javascript una galería de imágenes de producto para una ficha de producto de una tienda.
Ejemplo académico de como hacer con javascript una galería de imágenes de producto para una ficha de producto de una tienda.
No hay comentarios