I'm trying to solve below challenge but stuck on function call in ADDEVENTLISTNER

Issue

Challenge:

In this scenario we want the color of the circle to change depending on the type of cursor movement. Use the function toggleColor to turn the circle orange when the cursor moves onto it. Reuse the same function to turn it black when the cursor leaves it.

The tricky part is that you have to call toggleColor with different values for the parameter isEntering. Verify that your code is working by hovering the circle with the mouse cursor and leaving it again.

I tried to solve this challenge but it's showing an error. Where have I gone wrong?

My HTML HERE

 <div id="element">
Hover Me
</div>

My JAVAScript here

const element = document.querySelector('#element');

const toggleColor = (isEntering) => {
  element.style.background = isEntering ? 'orange' : 'black';
};
element.addEventListener('mouseover',toggleColor(value));
element.addEventListener('mouseout',toggleColor());

Solution

Your problem is already very obvious, you just want to add hover background effect to dom through mouse events. But the problem is that your side effect function is directly passed into the event callback. But your side-effects function explicitly needs a state tag. Used to determine whether the mouse has entered the away state. If you need to explicitly pass a parameter as an event callback, you should wrap your logic function toggleColor again. Because the event handler, by default, goes back to calling the event handler and passing the event object as the default parameter

just like do this

      const element = document.querySelector("#element");

      const toggleColor = (isEntering) => {
        element.style.background = isEntering ? "orange" : "black";
      };
      element.addEventListener("mouseover", () => toggleColor(true));
      element.addEventListener("mouseout", () => toggleColor(false));

Answered By - pachverb