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 Improving the Application Code Refactor 2: Readable Branching Logic

shaun bolak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points
Posted by shaun bolak
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points

Javascript DOM scripting - click event listener not firing after refactoring...

Hi all^^

So, after the final refactor of the guest list webpage example showcasing DOM scripting, the event listener on the buttons (remove, edit, save) have ceased to function.

I have spent about an hour comparing my code, line by line, to that of the instructor's and to that of other student examples. There must be a simple error that I am not seeing. However, I am unable to ascertain where and what is the cause.

If someone could take a look, it would greatly help my sanity... ; )

Code Snapshot:

https://w.trhou.se/zz23am7fiq

2 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

It looks like the button legends don't match the action names (for example: "Edit" with capital "E" vs. "edit" with little "e").

Since JavaScript identifiers are case-sensitive, they have to match exactly for the method invocation using bracket notation on "nameActions" to work.

shaun bolak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points
shaun bolak
.a{fill-rule:evenodd;}techdegree seal-36
shaun bolak
Front End Web Development Techdegree Graduate 18,080 Points

Hi Steven. Thank you for your answer. Actually, I tried both case types when I was debugging this (and again, just now, to be sure). It still does function since the refactoring. Is there anything else that you noticed?

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

I'm pretty sure that's the issue, you just have to make sure all instances of each name match in the code. There's two for "Remove", and three each for "Edit" and "Save".

Kristina Savova
.a{fill-rule:evenodd;}techdegree seal-36
Kristina Savova
Full Stack JavaScript Techdegree Graduate 21,997 Points

Hi Steven! I had the same kind of problem. Thank you a lot for your help!

Michael Kristensen
.a{fill-rule:evenodd;}techdegree seal-36
Michael Kristensen
Full Stack JavaScript Techdegree Graduate 26,251 Points

I kind of expected this to happen all the way through this subject, because Gil deliberately didn't write the button-labels with an initial capital, and that didn't seem right to me, visually.