How to write an IF else statement without 'else' in JavaScript

Question

I can't use else in my script; how can I implement an if else statement without using else?

I'm trying to resize a div:

function hideTable(){
    var table = document.getElementById('PDemo');
    if(table.style.width == "50%") table.style.width = "150px";
    if(table.style.width == "150px") table.style.width = "50%";
}

This script doesn't work because as soon as the first if statement is executed, the condition for the second if statement becomes true, so that executes too, and thus nothing changes.

score 21 · Answer 1 · edited Oct 29 '20 at 10:14

21

The ternary operator:

condition ? execTrue() : execFalse();

This is equivalent to:

if (condition) {
    execTrue();
}
else {
    execFalse();
}

You can write an if/else in 1 line, just don't press enter...

if (condition) { execTrue(); } else { execFalse(); }

Further, you can write any statement of arbitrary complexity on one line:

if(condition1) { exec1(); } else if(condition2) { exec2(); } else { execFalse() }

If you're having the issue where the second if statement executes as well, you want to impose mutual exclusion, i.e., using else if instead of just if on each subsequent conditional.

edited Oct 29 '20 at 10:14

Peter Mortensen

30,738
21
105
131

answered Mar 22 '11 at 13:47

Travis Webb

14,688
7
55
109

haha. it's a reporting software. its not an alternitive for eclipse or anything. it does'nt seem to like those elses. thanks anyway – 124697 Mar 22 '11 at 13:59
hmm, so you're typing these commands into like a one-line console or something? I see. Well if it doesn't "like" the else, the ternary operator is your solution. – Travis Webb Mar 22 '11 at 14:00

score 11 · Answer 2 · answered Mar 22 '11 at 13:49

11

Save the value into a different variable.

function hideTable(){
  var table = document.getElementById('PDemo');
  var width = table.style.width;
  if(width == "50%") table.style.width = "150px";
  if(width == "150px") table.style.width = "50%";
}

answered Mar 22 '11 at 13:49

Marcel Jackwerth

53,948
9
74
88

But shouldn't it change `table.style.width` at the end? Otherwise, that function does not seem to be doing much at all. – Peter Mortensen Oct 29 '20 at 10:16
It won't because it's checking the stored value in the variable which won't change. Your original code was checking the actual attribute value in both conditions, and that would change if the first condition was met. – AdamJB Jul 13 '22 at 13:38

score 8 · Accepted Answer · answered Mar 22 '11 at 13:48

8

If you can't use an else (and that is crazy), use a switch.

switch (table.style.width) {

    case '50%':
       ...
       break;

    case '150px':
       ...
       break;

}

answered Mar 22 '11 at 13:48

alex

479,566
201
878
984

Sean Patrick Floyd · Answer 4 · 2011-03-22T14:09:03.193

7

if(/*condition a*/){/*statements a*/}else if(/*condition b*/){/*statements b*/}else{/*statements c/*}

One line only.

edited Mar 22 '11 at 14:09

answered Mar 22 '11 at 13:48

Sean Patrick Floyd

292,901
67
465
588

score 0 · Answer 5 · edited Oct 29 '20 at 10:19

0

The && operator is called a short-circuit operator. It will return the value of the second operand based on the value of the first operand.

For example: (explanation : If 'profile' permission exists in permArray then load the user's profile)

isPermitted(permArray, 'profile') && loadProfile();

The && operator is useful also for checking for null objects before accessing their attributes. For example...

var name = person && person.getName();

edited Oct 29 '20 at 10:19

Peter Mortensen

30,738
21
105
131

answered Jun 05 '16 at 15:00

Musa

2,596
26
25

Yes, but how does that answer the question? – Peter Mortensen Oct 29 '20 at 10:19

score 0 · Answer 6 · edited Oct 29 '20 at 10:18

0

With a while loop for the sake of uniqueness.

while (!resized){
  if(width == "50%") {table.style.width = "150px";resized=true;break};
  if(width == "150px") table.style.width = "50%";resized=true;break};
  resized=true;
}

edited Oct 29 '20 at 10:18

Peter Mortensen

30,738
21
105
131

answered Mar 22 '11 at 14:03

Joseph Le Brech

6,541
11
49
84

2

I prefer the `do {//Stuff} while (0);` idiom better. – Mar 27 '11 at 18:03

How to write an IF else statement without 'else' in JavaScript

6 Answers6

Linked