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

Posted by Botos Claudia
.a{fill-rule:evenodd;}techdegree seal-36
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 Points

Function not recognized

Hey there , I am working on one of my projects for the techdegree, I want to create a modal where there is displayed extra info and I have a problem with one of the functions. My console does not give any errors and I also checked with Js hint, also no errors. I cannot seem to figure out why is it not working. Please Help! I will attach a snapshot of the project, the function not recognized is the setContent function https://w.trhou.se/olj8xhtlsn

Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

You might want to change the topic from java to javascript :-)

3 Answers

Steven Parker
Steven Parker
243,658 Points
Steven Parker
Steven Parker
243,658 Points

The "setContent" function is only invoked from a click handler for elements with class "modal-box". But that class is only present on div elements that are added to the employee elements. And these divs all have no contents, and therefor no physical dimension. So it's not possible to trigger that event.

Did you perhaps intend for that handler to respond to "employee-box" instead?

Botos Claudia
.a{fill-rule:evenodd;}techdegree seal-36
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 Points

Still does not work, I erased the trigger event and placed a console.log in the setContent function, and it does not work, It is really frustrating and I don't get errors in the console

Steven Parker
Steven Parker
243,658 Points
Steven Parker
Steven Parker
243,658 Points

There's no errors, the event just never happens. Here's what I did to make it work:

employeeWrapper.addEventListener("click", e => {
  if (e.target.className == "employee-box") {    // <-- I made only this change
    let selectedBox = e.target.parentNode;
    let selectedID = $(selectedBox).index();
    setContent(employeeInfo[selectedID]);
  }
}); //end employee-wrapper CLICK event
Botos Claudia
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 Points
Botos Claudia
.a{fill-rule:evenodd;}techdegree seal-36
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 Points

I corrected it but still it is not showing my extra employee info in the modal box , the modal box appears but the info which I set with setContent does not appear

Steven Parker
Steven Parker
243,658 Points
Steven Parker
Steven Parker
243,658 Points

I discovered when I tried it multiple times, it worked sometimes and not others. I'm not sure of the cause but as an experiment I merged the two event handlers into one and the behavior became consistent.

I removed the one at line 81 completely and modified the one at line 97 like this:

  $(employeeWrapper).on('click', ".employee-box", e => {  // add argument for delegated handler
      $('.modal-bg').addClass('active');
      $ ('.modal-content').addClass('active');
      let selectedBox = e.target.parentNode;   // here down from other handler
      let selectedID = $(selectedBox).index();
      setContent(employeeInfo[selectedID]);
  });