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 JavaScript and the DOM (Retiring) Traversing the DOM Solution: Using nextElementSibling

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Posted by Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

2 different approaches not sure why one doesnt work. else if vs if.

so basically I have been trying to nest multiple else if statements to make this work. in my code below you can see the last else if is commented out. I have turned it into an if statement to test.

listUL.addEventListener('click', (event) => {
if(event.target.tagName == 'BUTTON'){
  if (event.target.className == 'remove') {
  let li = event.target.parentNode;
  let ul = li.parentNode;
  ul.removeChild(li);

      }else if(event.target.className == 'up'){
      let li = event.target.parentNode;
      let ul = li.parentNode;  
      if(li.previousElementSibling){
        ul.insertBefore(li,li.previousElementSibling);
      }             
//              }else if(event.target.className == 'down'){
//                let li = event.target.parentNode;
//                let nextLi= li.nextElementSibling;
//                let ul = li.parentNode;  
//                if(nextLi){
//                  ul.insertBefore(nextLi,li);
//              }
        }
      if(event.target.className == 'down'){
          let li = event.target.parentNode;
          let nextLi= li.nextElementSibling;
          let ul = li.parentNode;  
          if(nextLi){
            ul.insertBefore(nextLi,li);
        }
    }
  }
});

basically if its nested as a second else if it doesnt work. If I have it as a stand alone if statement then it works just fine. No changes to the actual if conditions etc. Copy paste.

can someone tell me why it wouldnt work with the last button listed as another else if?

3 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

When you have two "if" statements in series, they will both run when their conditional expressions are true.

But when the second one is "else if", it will only run when the first expression is false (and its own expression is true).

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

OK I get what you saying, but in my use case should it not still work? I mean its 3 distinct click events that will respond only if their specific button is clicked.

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Sure, since these are mutually exclusive tests it should indeed work.

So I tried your snapshot, and I did not see any difference in behavior when I added "else" in front of the last if.

<noob />
<noob />
17,062 Points

I dont quite understand the last sentence, what do u mean by : it will only run when the first expression is false (and its own expression is true)

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

<noob /> all that Steven parker is saying in his comment

But when the second one is "else if", it will only run when the first expression is false (and its own expression is true).

the

else if(){

}

part will only run when the

if (){

}

condition fails and the condition in the else if is true. when the if block is true it wont run.

when you have 2 if statements following each other 

if(){

}
if(){

}

even if the first one is true the second one will still run.

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

By "its own" I mean the second one:

if ( first_expression ) {
    console.log("the first one is true, and the second one doesn't matter");
} else if ( second_expression ) {
    console.log("the first one is FALSE, and the second one is true");
}
<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

It should work, but ur syntax isn't ok. basically you want to use "if" for ur first if statement and "else if" for the other option and "else" if nothing has been met this is the structure try to modify it like so:

if(something) {

} else if(something) {

} else if(something) {

} else {


}
Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

Thanks for the response, but you dont necessarily need to end the else if chain with an else statement. It only needs to end on "else" if you require the code to do something should none of the conditions be met. If you exclude the else it just wont do anything if the initial if/else if conditions arent met.

so if(){
//
}else if(){
//
}else if(){
//
};

should work just fine.

heres a link where its discussed https://stackoverflow.com/questions/38536554/do-i-need-a-last-else-clause-in-an-if-else-if-statement

so there must be something else I have overlooked somewhere.

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

You are correct about that

in order to help u i need a snapshot of the workspace :], it has to do with the identation or something simple.