Ejercicios de práctica de JavaScript

Ejercicio F-4

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.

  1. Crea un botón en HTML y coloca como texto Activar. Luego en tu archivo CSS dale un background-color: red; al botón.
  2. 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).
  3. 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-rojo", luego en mi archivo de CSS nombrado ejercicios.css nombro la clase boton-rojo y le aplico la propiedad background-color con el valor "red".

Como el botón creado tiene id="ejercicio30", creo la variable boton a la que voy a relacionar con el botón de mi HTML mediante .getElementById, así luego escribo menos código, en vez de poner document.getElementById("ejercicio30") solo escribo boton

let boton = document.getElementById("ejercicio30");

Y agrego el .addEventListener con el evento click que activará la función cambiarTexto que cambiará el texto del botón por “Desactivado”

boton.addEventListener('click', cambiarTexto);

Agrego el .addEventListener con el evento mouseenter que activará la función cambiarVerde, que cambiará el color a verde

boton.addEventListener("mouseenter", cambiarVerde);

Agrego el .addEventListener con el evento mouseleave que activará la función cambiarColor, volviendo al color que predeterminamos en CSS (rojo)

boton.addEventListener('mouseleave', volverColor);

Función cambiarTexto

function cambiarTexto() {
boton.innerHTML = "Desactivado";
}

Función cambiarVerde

function cambiarVerde() {
boton.style.backgroundColor = "green";
}

Función cambiarColor

function volverColor() {
boton.style.backgroundColor = "red";
}
 Volver al inicio