将参数传递给Mouseenter/Mouseout JS回调

发布于 2025-01-30 02:22:21 字数 721 浏览 2 评论 0原文

我提出了这一挑战,其中圆形的颜色是根据光标运动的类型进行更改。

我必须使用togglecolor()函数才能在光标移到其上时用橙色填充圆圈。然后,我必须重复使用相同的功能将其填充在光标离开后。

必须完成此操作,以使用参数iSentering为具有不同值的togglecolor()。 (为了做到这一点,我在.addeventListener()的回调中调用.togglecolor()函数

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

const toggleColor = (isEntering) => {
element.style.background = isEntering ? 'orange' : 'black';
};

element.addEventListener('mouseenter', ()=>toggleColor(true))
element.addEventListener('mouseout', ()=>toggleColor(false))

。我在哪里失败了

? “ rel =“ nofollow noreferrer”> https://www.jschallenger.com/javascript-dom-ercercises/events-and-yevents-and-user-interactions/cursor-enter-enter-enter-leave-event

I'm presented this challenge where the circle's color is to change depending on the type of cursor movement.

I must use the function toggleColor() in order to fill the circle with orange when the cursor moves onto it. Then, I got to reuse the same function to fill it in black once the cursor leaves it.

This must be done calling the toggleColor() with different values for the parameter isEntering. (In order to do this, I'm invoking the .toggleColor() function inside the callbacks of the .addEventListener()'s.

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

const toggleColor = (isEntering) => {
element.style.background = isEntering ? 'orange' : 'black';
};

element.addEventListener('mouseenter', ()=>toggleColor(true))
element.addEventListener('mouseout', ()=>toggleColor(false))

That's my solution to the challenge, and even though it does the work, the tests are not passing. Where am I failing at?

Here is the link to the challenge: https://www.jschallenger.com/javascript-dom-exercises/events-and-user-interactions/cursor-enter-leave-event

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

明月松间行 2025-02-06 02:22:21

正确的是:
element.AddeventListener('MouseOver',()=> toggleColor(true));
element.AddeventListener('Mouseleave',()=> togglecolor(false));

The correct is:
element.addEventListener('mouseover', () => toggleColor(true));
element.addEventListener('mouseleave', () => toggleColor(false));

焚却相思 2025-02-06 02:22:21

我使用了以下内容,对我有用。希望这会有所帮助。

element.onmouseenter = () => toggleColor(true);    
element.onmouseleave = () => toggleColor(false);

I used the following and it worked for me. Hope this helps.

element.onmouseenter = () => toggleColor(true);    
element.onmouseleave = () => toggleColor(false);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文