jQuery - Mouse Events - 5. currentTarget

https://www.codecademy.com/courses/learn-jquery-event-handlers/lessons/mouse-events/exercises/current-target?action=lesson_resume&course_redirect=learn-jquery

My question about this particular section is the event.currentTarget. I am pasting what the assignment is below.

Add event as an argument to your .product-photo callback functions.

Inside the callback functions, use event.currentTarget to make only one image at a time zoom in and zoom out when your mouse enters and leaves.

This is what I entered as my solution to the question:

$('.product-photo').on('mouseenter', event => {
    $(event.currentTarget).addClass('photo-active');
  }).on('mouseleave', event => {
    $(event.currentTarget).removeClass('photo-active');
  })

This is the error that I am getting:

Oops! The test returned an error. Maybe you have a syntax error, or a typo. Hide error.
/home/ccuser/workspace/learn-jquery-event-handlers-mouse-events-this/test/test.js:24
}).on(_, => {
^^
SyntaxError: Unexpected token =>
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensionsā€¦js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at /home/ccuser/node_modules/mocha/lib/mocha.js:220:27
at Array.forEach (native)
at Mocha.loadFiles (/home/ccuser/node_modules/mocha/lib/mocha.js:217:14)
at Mocha.run (/home/ccuser/node_modules/mocha/lib/mocha.js:469:10)
at Object. (/home/ccuser/node_modules/mocha/bin/_mocha:404:18)
at Module._compile (module.js:571:32)
at Object.Module._extensionsā€¦js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:427:7)
at startup (bootstrap_node.js:151:9)
at bootstrap_node.js:542:3

Donā€™t understand why Iā€™m getting this error. Have entered in what itā€™s asking. Not sure what else it wants.

Can you show us your complete code, please?

1 Like

No problem.

$(document).ready(() => {
  $('.login-button').on('click', () => {
    $('.login-form').show();
  });
  
  $('.menu-button').on('mouseenter', () => {
    $('.nav-menu').show()
  })
  
  $('.nav-menu').on('mouseleave', () => {
    $('.nav-menu').hide();
  })
  
  $('.product-photo').on('mouseenter', event => {
    $(event.currentTarget).addClass('photo-active');
  }.on('mouseleave', event => {
    $(event.currentTarget).removeClass('photo-active');
  }))
  
});

There looks to be an extra bracket where a semi-colon should go.

1 Like

Revised code.
(document).ready(() => { (ā€™.login-buttonā€™).on(ā€˜clickā€™, () => {
$(ā€™.login-formā€™).show();
});

('.menu-button').on('mouseenter', () => { (ā€™.nav-menuā€™).show()
})

('.nav-menu').on('mouseleave', () => { (ā€™.nav-menuā€™).hide();
})

('.product-photo').on('mouseenter', event => { (event.currentTarget).addClass(ā€˜photo-activeā€™);
}).on(ā€˜mouseleaveā€™, event => {
$(event.currentTarget).removeClass(ā€˜photo-activeā€™);
});

});
That should be good. Put in the ) in front of .on, but still same error message.

It apparently didnā€™t need the semicolons after the statements. (I had pressed get code and that was their solution).

Until such time as the spec explicitly says that semi-colons are no longer required we should continue to use them religiously, for syntactical completeness. The above code is missing those semi-colons due to author neglect. Donā€™t read anything into it.

2 Likes

Hello, the error is not coming from youā€¦ I believe itā€™s a bug. I also copied the ā€œGet codeā€ results and reset the code, then I pasted the results and there was still an error. I already reported the bug, but if others are still experiencing this then keep reporting it.

I am currently running into this exact issue as well.

My code:


  $('.product-photo').on('mouseenter', event => {
    $(event.currentTarget).addClass('photo-active');
  }).on('mouseleave', event => {
    $(event.currentTarget).removeClass('photo-active');
  });

I have encountered this issue today. My solution works fine in the browser, but unfortunately I am unable to complete the task. It seems that this behaviour is caused by some syntax errors in the structure verification code in test.js file. I also reported this as a bug.

UPDATE:
I got back to the course today and it seems that the issue has been fixed :slight_smile: