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 Carlos Chang Cheng
Carlos Chang Cheng
Courses Plus Student 12,030 Points

Hi everyone!, why it isn't working in Firefox?

It works fine in Safari and Chrome... not console error is shown neither...

Thanks!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I'm curious as to what exactly isn't working in Firefox. If you're doing this in a workspace, this will be easier to troubleshoot if we can see a "snapshot" of your workspace. You can make a snapshot by clicking the camera icon on the upper right hand side of the workspace and then post the link here.

Also, you might try viewing the page in a private tab in Firefox. If it works in a private tab, it means that what is being loaded in the non-private tab is a cached (old) version of your code. If it works in the private tab, you will need to clear your browser cache as this is likely the source of the problem.

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I had a chance to look at your code. Again, I'm sorry for the delay. And now I'm wondering why it works in Chrome :smiley: Yes, I was able to reproduce your problem and find the solution.

Here's the relevant section of your code that's causing the problem:

listUl.addEventListener('click', (e) =>{
if (event.target.tagName == 'BUTTON') {
  if(e.target.className == 'remove') {

let li = event.target.parentNode;
  let ul = li.parentNode;
  ul.removeChild(li);
    }
  if(e.target.className == 'up'){
    let li = event.target.parentNode;
    let prevLi = li.previousElementSibling;
    let ul = li.parentNode;
    if(prevLi){
  ul.insertBefore(li,prevLi);
    }
  }

  if(e.target.className == 'down'){
    let li = event.target.parentNode;
  let nextLi = li.nextElementSibling;
    let ul = li.parentNode;
    if(nextLi){
    ul.insertBefore(li, nextLi.nextSibling);
    }
  }
}
});

In this EventListener you pass in the event and name it e, but then continue through the code and interchange event and e. Now, the really great question here is why Chrome understands what you mean, but Firefox doesn't. I've looked for information on this and come up a little empty here.

So, if I replace all those event with e, your code works in Firefox as well!

Here's how I did it:

listUl.addEventListener('click', (e) =>{
if (e.target.tagName == 'BUTTON') {
  if(e.target.className == 'remove') {

let li = e.target.parentNode;
  let ul = li.parentNode;
  ul.removeChild(li);
    }
  if(e.target.className == 'up'){
    let li = e.target.parentNode;
    let prevLi = li.previousElementSibling;
    let ul = li.parentNode;
    if(prevLi){
  ul.insertBefore(li,prevLi);
    }
  }

  if(e.target.className == 'down'){
    let li = e.target.parentNode;
  let nextLi = li.nextElementSibling;
    let ul = li.parentNode;
    if(nextLi){
    ul.insertBefore(li, nextLi.nextSibling);
    }
  }
}
});

Hope this helps, and if you figure out why Chrome understands it, but Firefox doesn't, let me know! I'm super curious :sparkles:

edited for additional information

I was, in fact, so curious about this that I did some more digging around. The event object is global in Chrome and IE (and apparently Safari as well). It is not global in Firefox. I found this on stackoverflow!

Also, if you check the Window.event documentation on MDN, you'll notice that it's non-standard and not supported in Firefox.

:sparkles:

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

marked as Best Answer

Carlos Chang Cheng
PLUS
Carlos Chang Cheng
Courses Plus Student 12,030 Points
Carlos Chang Cheng
Carlos Chang Cheng
Courses Plus Student 12,030 Points

Hello Jennifer Nordell its not a cache issue because everytime I open Firefox Dev the cache is reset. Here is the snapshot link (I just used quicktime and uploaded it to my google drive):

Here's the link

Thanks!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Sorry in the delay getting back to you. Unfortunately, what you have posted here is a screen capture. What I'm looking for is a "snapshot" of your workspace. This will allow me to fork your workspace and view the code and file structure. If you'll take a second look at my comment above, you'll find instructions on how to make a "snapshot".

Alternatively, if you're not doing this in a workspace but on your local system, you may link a GitHub repository here and we can take a look that way. :sparkles:

Carlos Chang Cheng
PLUS
Carlos Chang Cheng
Courses Plus Student 12,030 Points
Carlos Chang Cheng
Carlos Chang Cheng
Courses Plus Student 12,030 Points

Thanks Jennifer Nordell! Here is my repository:

link repository

Carlos Chang Cheng
PLUS
Carlos Chang Cheng
Courses Plus Student 12,030 Points
Carlos Chang Cheng
Carlos Chang Cheng
Courses Plus Student 12,030 Points

Thanks Jennifer Nordell! you're awesome and a great help for the community...