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?

else means that the previous condition is not met. If scrollTop > 5500 chances are it is also ` > 200` — njzk2
– njzk2, Commented Apr 2, 2014 at 23:02

raina77ow · Accepted Answer · 2014-04-02 23:15:18Z

4

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.

edited Apr 2, 2014 at 23:15

answered Apr 2, 2014 at 23:00

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

michaelward82 Over a year ago

Or you could test for (scrollTop > 200 && scrollTop <= 5500) for your first step

andy Over a year ago

^ Yes, this, urgh I can't believe I didn't think of this before asking the question, thanks anyway. Wish I would award the correct answer to blair too.

Quintec · Accepted Answer · 2014-04-02 23:04:45Z

1

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.

answered Apr 2, 2014 at 23:04

Quintec

1,11412 silver badges23 bronze badges

Comments

Blair McMillan · Accepted Answer · 2014-04-02 23:03:57Z

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: '',
    });
}

Buzinas · Accepted Answer · 2014-04-02 23:07:27Z

"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: '',
    });    
}

aprasty · Accepted Answer · 2015-06-18 07:24:06Z

-2

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();
}

});

answered Jun 18, 2015 at 7:24

aprasty

1

Collectives™ on Stack Overflow

else if statement not working in jquery

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related