Desafío:
En este escenario, queremos que el color del círculo cambie según el tipo de movimiento del cursor. Use la función toggleColor para convertir el círculo en naranja cuando el cursor se mueva sobre él. Reutilice la misma función para volverla negra cuando el cursor la abandone.
La parte complicada es que debe llamar a toggleColor con diferentes valores para el parámetro isEntering. Verifique que su código esté funcionando pasando el cursor del mouse sobre el círculo y dejándolo nuevamente.
Intenté resolver este desafío pero muestra un error. ¿Dónde me he equivocado?
Mi HTML AQUÍ
<div id="element"> Hover Me </div>Mi JAVAScript aquí
const element = document.querySelector('#element'); const toggleColor = (isEntering) => { element.style.background = isEntering ? 'orange' : 'black'; }; element.addEventListener('mouseover',toggleColor(value)); element.addEventListener('mouseout',toggleColor());Si desea pasar el parámetro a la función que se está llamando en cierto evento, debe llamar a esa función en la función anónima funtion() . En su caso, llamar a toggleColor(value) dentro de la función anónima hará el trabajo. A continuación se muestra el estilo javascript.
const element = document.querySelector('#element'); const toggleColor = (isEntering) => { element.style.background = isEntering ? 'orange' : 'black'; }; element.addEventListener('mouseover', function(){ toggleColor(true); }); element.addEventListener('mouseout', function(){ toggleColor(false); }); #element{ position: relative; height: 250px; width: 250px; background-color: #ddd; } <div id="element"></div> Puede lograr esto con CSS puro usando :hover .
#element { position: relative; height: 250px; width: 250px; background-color: orange; } #element:hover{ background-color: black; } <div id="element"></div>El oyente necesita que se le asigne una función que pueda usar. En este momento, está asignando el resultado de llamar a toggleColor al oyente. Una forma de lograr esto es devolver una nueva función desde toggleColor .
const element = document.querySelector('#element'); const toggleColor = (value) => { return function () { element.className = value ? 'orange' : 'black'; } }; element.addEventListener('mouseover', toggleColor(true)); element.addEventListener('mouseout', toggleColor(false)); #element { padding: 0.4em; } #element:hover { cursor: pointer; } .orange { background-color: orange; color: black; } .black { background-color: black; color: white; } <div id="element">Hover Me</div>Su problema ya es muy obvio, solo desea agregar un efecto de fondo de desplazamiento a dom a través de eventos del mouse. Pero el problema es que su función de efectos secundarios se pasa directamente a la devolución de llamada del evento. Pero su función de efectos secundarios necesita explícitamente una etiqueta de estado. Se utiliza para determinar si el ratón ha entrado en estado ausente. Si necesita pasar explícitamente un parámetro como una devolución de llamada de evento, debe envolver su función lógica toggleColor nuevamente. Porque el controlador de eventos, de forma predeterminada, vuelve a llamar al controlador de eventos y pasa el objeto de evento como parámetro predeterminado.
como hacer esto
const element = document.querySelector("#element"); const toggleColor = (isEntering) => { element.style.background = isEntering ? "orange" : "black"; }; element.addEventListener("mouseover", () => toggleColor(true)); element.addEventListener("mouseout", () => toggleColor(false));