En la red se encuentra disponible el típico ejercicio con un window.alert().
Cansado de este ejemplo en esta publicación encontrarás un ejercicio de iniciación con un saludo auténtico.
Los conceptos que te serán de utilidad son:
Pasemos al ejercicio.
Enunciado
Escribe un programa que cuando se pulse el botón cree un nodo imagen y lo inserte en el documento web.
El nodo debe contener la imagen saludo.gif adjunta.
Haz que cuando se haga doble click sobre una imagen se elimine el primer nodo imagen generado.
No hay límite en el nombre de imágenes que se pueden añadir y todas se deben poder eliminar.
Atención: el doble click no es correlativo, un doble click sobre una imagen no necesariamente eliminará esta sino la primera. No se pide el uso de la instrucción this para resolver este ejercicio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejercicio addEventListener</title>
<meta name="author" content="Francesc Ricart"/>
</head>
<body>
<button>Cuando me pulses activaré un evento javascript</button>
<script>
// escribe aquí tu código JS
</script>
</body>
</html>
Solución del ejercicio
Observa que todas las variables empiezan con z.
Esto se debe a una estrategia con mis alumnos de web que les indica que me estoy inventando un nombre. Simplemente es para ayudar a entender que los nombres de las variables son puramente inventados.
- La función saludo() genera un nodo y lo injerta en el documento.
- La función eliminarMano() pide una lista de nodos de tipo imagen y elimina el primero de la lista. Es activado mediante un doble click sobre la última imagen del documento.
window.addEventListener("load",zInit);
function zInit(){
var zBotones = document.querySelectorAll("button");
zBotones[0].addEventListener("click",saludo);
};
function saludo(){
zMano = document.createElement("img");
zMano.style.display="block";
var zBody = document.querySelectorAll("body")[0];
zMano.src = "saludo.gif";
zBody.appendChild(zMano);
zMano.addEventListener("dblclick",eliminarMano);
}
function eliminarMano(){
document.querySelectorAll("img")[0].parentNode.removeChild(zMano);
}Para mejorar el código deberíamos usar this. De este modo valdría hacer click sobre cualquier imagen y no específicamente la última que se haya injertado en el body.¡Hola!
Querido lector,
Este es un buen ejercicio para la asimilación de conceptos. ¡Espero que te sea de utilidad!
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta