CODEWITHSUNDEEP
javascript
Bandarbola855
Bandarbola855

Reputation: 127

many else if conditional operator not working

i want it trigger when number is 0. when number is 1 or 2, when number is 3 or 4, when number is 5 or 6. when trigger it will change height some element. for now it always return 70px.

    if(y == 0){
        $('slpage').style.height = '0px';
    }else if(y >= 1){
        $('slpage').style.height = '70px';
    }else if(y <=4){
        $('slpage').style.height = '140px';
    }else if(y >= 5){
        $('slpage').style.height = '210px';
    }

thanks

Upvotes: 2

Views: 61

Answers (6)

mplungjan
mplungjan

Reputation: 178421

DRY (Don't Repeat Yourself)

var h = 0;
     if (y >= 5) h = 210;
else if (y >= 3) h = 140;
else if (y >= 1) h = 70;
$('slpage').style.height = h+'px';

assuming 

function $(id) { return document.getElementById(id); }

If you are using jQuery, you need 

$('.slpage').css({"height": h+'px'});

or 

$('#slpage').css({"height": h+'px'});

depending on selector

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 122026

You should consider reordering your statements. So that it checks the highest first and then for lowest.

if(y == 0){
        $('slpage').style.height = '0px';
    }else if(y >= 5){
        $('slpage').style.height = '210px';
    }else if(y >=4){
        $('slpage').style.height = '140px';
    }else if(y >= 1){
        $('slpage').style.height = '120px';
    }

Otherwise, you end up triggering the lowest always before reaching the highest.

And I guess you made a type for the check in your third condition. Corrected.

switch if the integer dependent. its means it should 0,1,2,3,4,5,6. but my situation is if 0. it trigger. if 1-2. it trigger. if 3-4. it trigger. if 5-6. it trigger.

Don't restrict yourself using switch just because you have to cover 2 cases at a time. Switch have that facility too.

switch (y) {
    case 0:
        $('slpage').style.height = '0px';
        break;
    case 1:
    case 2:
        $('slpage').style.height = '120px';
        break;
    case 3:
    case 4:
         $('slpage').style.height = '140px';
        break;
    case 5:
    case 6:
         $('slpage').style.height = '240px';
         break;
}

Assuming you using Jquery, your selector of Jquery is wrong. You are missing # or . Ignore if you are not.

Upvotes: 2

Narendra Jadhav
Narendra Jadhav

Reputation: 10272

You can use switch case also 

switch (y) {
    case 0:
        $('slpage').style.height = '0px';
        break;
    case 1:
    case 2:
        $('slpage').style.height = '70px';
        break;

    case 3:
    case 4:
        $('slpage').style.height = '140px';
        break;
    case 5:
    case 6:
        $('slpage').style.height = '210px';
        break;
}


function sw(y) {
    switch (y) {
        case 0:
            console.log('0px');
            break;

        case 1:
        case 2:
            console.log('70px');
            break;

        case 3:
        case 4:
            console.log('140px');
            break;
        case 5:
        case 6:
            console.log('210px');
            break;

        default:
        console.log('no value mathed value');
    }
}

sw(0);

sw(1);

sw(2);

sw(3);

sw(4);

sw(5);

sw(6);

sw()

Upvotes: 1

Tarek
Tarek

Reputation: 725

Switch statement maybe ?

switch (y) {
    case 0:
         $('slpage').style.height = '0px';
        break;
    case 1:        
    case 2:
        $('slpage').style.height = '70px';
        break;
    case 3:
    case 4:
        $('slpage').style.height = '140px';
        break;
    case 5:
    default:
        $('slpage').style.height = '210px';
}

For more infos you can check: https://www.w3schools.com/js/js_switch.asp

Upvotes: 0

gaback
gaback

Reputation: 638

Better to use switch:

switch (y) {
    case 0:
        $('slpage').style.height = '0px';
        break;
    case 1:
    case 2:
        $('slpage').style.height = '70px';
        break;
    case 3:
    case 4:
        $('slpage').style.height = '140px';
        break;
    case 5:
    case 6:
        $('slpage').style.height = '210px';
        break;
    default:
        $('slpage').style.height = '0px';
 }

Upvotes: 0

Sandeep
Sandeep

Reputation: 1

When you have y = {1,2,3,4,5,6} it satisfies the condition that it is >=1 hence it breaks it at that point. Instead change your logic from highest to lowest

   if(y >=5){
        $('slpage').style.height = '210px';
    }else if(y >= 3){
        $('slpage').style.height = '140px';
    }else if(y >=1){
        $('slpage').style.height = '70';
    }else {
        $('slpage').style.height = '0px';
    }

Upvotes: 0

Related Questions