else if statement not working in jquery

Question

I removed the variable names and just put the values in for simplicities sake.

Can't work out why this doesn't work properly, the else statement works fine, the if statement works fine but the else if part doesn't.

 if (scrollTop > 200) {

    $('.vote-next-hover').css({

        position: 'fixed',
        top: '50px',
        width: statuscontain,

    });

 } 

 else if (scrollTop > 5500) {

     $('.vote-next-hover').css({

        position: 'absolute',
        top: '',
        width: '',

     });

 } 

else {

  $('.vote-next-hover').css({

        position: 'relative',
        top: '',
        width: '',
    });

}   

Scroll 200px, fires the if statement, scroll back to less than 200 and it fires the else statement, but at no point does it fire the else if statement.

I thought it would sort of be - Condition 1 met, fires - Condition 2 met, fires - Condition 3 met, fires?

Answer 1

You should swap the if and else if clauses. See, if scrollTop value is greater than 5500 , it's definitely greater than 200 - therefore it will pass the very first check quite well, making the second one meaningless.

So if (scrollTop > 5500) should go first in your code, followed by else if (scrollTop > 200) check.

---

I wonder did you know that the same branching logic could be written with... switch ?

var hoverStyle = { position: 'relative', top: '', width: '' };
switch (true) {
  case scrollTop > 5500:
    hoverStyle.position = 'absolute';
    break;
  case scrollTop > 200:
    hoverStyle = { position: 'fixed', top: '50px', width: statuscontain };
}
$('.vote-next-hover').css(hoverStyle);

Some people even consider it more readable than if-elseif-else . But of course the same restrictions apply there - the less common cases should go first (or should be re-checked later).

As a sidenote, I really think there's no point duplicating $('.vote-next-hover').css() call within the branches. It's enough to separate only different parts of code - in this case, setting up the .css() param.

Answer 2

The if/else if/else block should only run one of the three choices. For example:

var test = 4;
if (test === 4) { //true
    test = 3;
} else if(test === 3) {//does not do, already did one
    test = 0
} else {
    test = “something”
}

So you need three if blocks, not if/else if/else.

Answer 3

Say you have scrolled to 6000, 6000 is greater than 200, so the first condition is met. Then because you have an else if it doesn't test the second condition.

You have two options:

Add the scrollTop > 5500 check to inside the > 200 check, or replace the order of the if, else if to put the > 5500 check first, then then > 200 check.

if (scrollTop > 200) {
    if (scrollTop > 5500) {
        $('.vote - next - hover ').css({
            position: 'absolute ',
            top: '',
            width: '',
        });
    } else {
        $('.vote - next - hover ').css({
            position: 'fixed ',
            top: '50px ',
            width: statuscontain,
        });
    }
} else {
    $('.vote - next - hover ').css({
        position: 'relative ',
        top: '',
        width: '',
    });
}

Answer 4

"Scroll 200px, fires the if statement, scroll back to less than 200 and it fires the else statement, but at no point does it fire the else if statement."

This is a logic error. Since any number higher than 5500 is also higher than 200, and when you use else if you're saying that the first criteria was not true.

You should change your code to:

if (scrollTop > 5500) {
    $('.vote-next-hover').css({
        position: 'absolute',
        top: '',
        width: '',
    });    
}
else if (scrollTop > 200) {                      
    $('.vote-next-hover').css({
        position: 'fixed',
        top: '50px',
        width: statuscontain,
    });

}
else {
    $('.vote-next-hover').css({

        position: 'relative',
        top: '',
        width: '',
    });    
}

Answer 5

This logic error

$('#crud_interval').bind("change", function() {

if( $('#crud_interval').val() ==='Daily' ) { //not running
    $('#crud_weekly_day').hide();
    $('#crud_monthly_date').hide();
} else if( $('#crud_interval').val() ==='Weekly' ) { //not running
    $('#crud_weekly_day').show();
    $('#crud_monthly_date').hide();
} else {
    $('#crud_weekly_day').hide();
    $('#crud_monthly_date').show();
} 

});