Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Adding and Removing Names RSVP Checkbox

Firefox Issue

Firefox is not adding the 'responded' class when checkboxes are checked. Everytime the checkbox is checked I get the following in console: 'ReferenceError: event is not defined', 'app.js:21:9'

Tested on a webkit browser and worked fine.

Pierrick Le Roy
Pierrick Le Roy
3,235 Points

Hello, this is because of a mistake in the video. Guil typed "event" instead of "e", that's why you got event is not defined. So just name correctly the Event Object to be "e".

Pierrick

1 Answer

Joel Kraft
STAFF
Joel Kraft
Treehouse Guest Teacher

Pierrick is right, there is an error in the video. We'll fix this as soon as we can. Thanks for helping us catch this!

Explanation:

Chrome and Firefox handle the event variable differently. Chrome defines it, even if the developer hasn't! Firefox doesn't define event unless it is defined in the code. This is why you see the error in FF but not Chrome.

To avoid this issue, you always want to pass an argument into the handler, and use that argument to refer to the event object. So you could write:

DOMElement.addEventListener((e) => {
  const element = e.target; // yay! :)
});

or

DOMElement.addEventListener((event) => {
  const element = event.target; // yay! :)
});

but NOT

DOMElement.addEventListener((e) => {
  const element = event.target; // boo! :(
});

and also NOT

DOMElement.addEventListener((event) => {
  const element = e.target; // boo! :(
});

Does that make sense?

Thank you for the explanation Joel and Pierrick.

Good explanation -- thanks, Joel!