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: