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());
If you want to pass parameter to function which is being called on certain event you must call that function in anonymous funtion(). In your case By calling toggleColor(value) inside the anonymous function will do the work. Below is javascript style.
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>You can achieve this with pure css by using :hover.
#element {
position: relative;
height: 250px;
width: 250px;
background-color: orange;
}
#element:hover{
background-color: black;
}<div id="element"></div>The listener needs to be assigned a function that it can use. At the moment you're assigning the result of calling toggleColor to the listener instead. One way of achieving this is to return a new function from 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>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));