Ejercicios de práctica de JavaScript
Ejercicio 30
Manipulando el DOM de un botón a partir de un evento.
Nivel junior
Spoiler alert: Sigue las instrucciones paso a paso. No te adelantes, de lo contrario correrás el riesgo de no encontrar la solución o que se te dificulte las mismas.
- Crea un botón en HTML y coloca como texto Activar. Luego en tu archivo CSS dale un background-color: red; al botón.
- Agrega al botón los siguientes eventos en JS: click, mouseenter, mouseleave. (Recuerda obtener el elemento para luego manipularlo con cada uno de los eventos que tienes que crear).
- En las funciones vinculadas al evento programa lo siguiente.
- Evento click : Programa que cuando se haga click, el texto del botón, se cambie por el string “Desactivado”.
- Evento mouseenter : Cuando entre el cursor al botón, este cambie de color a verde.
- Evento mouseleave : Cuando se salga el cursor del botón, que vuelva al color que predeterminamos en CSS
👇🏼 Acá está el botón creado
Cómo lo hice?
En este archivo html creo el botón con el texto Activar y le aplico la clase "boton-ejercicio30, luego en mi archivo de CSS nombrado ejercicios.css nombro la clase boton-ejercicio30 y le aplico la propiedad background-color con el valor "red".
👀 Hay que verlo desde la consola
Volver al inicio