jQuery - Mouse Events - 5. currentTarget


#1

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.


#2

Can you show us your complete code, please?


#3

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');
  }))
  
});

#4

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


#5

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.


#6

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


#7

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.


#9

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.


#10

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');
  });


#11

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: