Too many if statements. Is there an easier way?

Hi,

I am new to javascript and have the following dilemma. I will give you a short example and if you need any more information just ask. I have various different variables (about 16) if one of the variables is greater than or equal to one I what it to show a <div>. This works fine however there is going to be so many if and else if statements and wondering if there was an easier way of doing this.
Here is an example of how it would work.

function() {
if (Variable1 >= 1) {
show div1
if (Variable2 >= 1) {
show div2
}
}
else if (Variable2 >= 1) {
show div2
}
}

So in this example whether Variable1 is true or not it would still need to check Variable2.
This is fine for a few Variables but when I have 16 this is going to get very messy and hard to read if I keep doing nested if statements and then else if statements. Is there another (Better cleaner way) to do this. I have looked at tutorials but can't seem to work out a way. I know I am new to this so if the solution is easy I can only apologise. I would really appreciate any reply.

Use the 'switch' statement in conjunction with multiple 'case' checks.

Switch may not help, if you have 8 variables, say, and 16 conditions.

Better is to look at the logic and simplify it.

For example, the code given can be simplified to
if (Variable2 >= 1) {
show div2
}
if (Variable1 >= 1) {
show div1
}

But maybe you should be using an array instead of individual variables?

or or or ...

We can't really give you a solid answer based on that little snippet.

You can also set and unset flags, which can reduce the number of conditional statements.

Hi,

I am new to javascript and have the following dilemma. I will give you a short example and if you need any more information just ask. I have various different variables (about 16) if one of the variables is greater than or equal to one I what it to show a <div>. This works fine however there is going to be so many if and else if statements and wondering if there was an easier way of doing this.
Here is an example of how it would work.

function() {
if (Variable1 >= 1) {
show div1
if (Variable2 >= 1) {
show div2
}
}
else if (Variable2 >= 1) {
show div2
}
}

So in this example whether Variable1 is true or not it would still need to check Variable2.
This is fine for a few Variables but when I have 16 this is going to get very messy and hard to read if I keep doing nested if statements and then else if statements. Is there another (Better cleaner way) to do this. I have looked at tutorials but can't seem to work out a way. I know I am new to this so if the solution is easy I can only apologise. I would really appreciate any reply.

you have about 16 variables,
how many divs do you have?
should variable1 control only div1
and variable2 control only div2 ?

function() {
if (Variable1 >= 1) {
show div1
if (Variable2 >= 1) {
show div2
}
}
else if (Variable2 >= 1) {
show div2
}
}



use the least-diverse option as grouping.
in other words, transpose your logic table by writing conditions for div1 and div2.

blnShowDiv1= Variable1 >= 1 || Variable7 >= 1 || Variable8 >= 1
blnShowDiv2= Variable2 >= 1
blnShowDiv3= Variable1 >= 1 && Variable2 >= 1 && Variable3 >= 1
this way, you can avoid the nesting and the redundancy of checking independent variables

Yes. Exactly.

And you can extend that to direct control very easily:

document.getElementById("div1").style.display =
( Variable1 >= 1 || Variable7 >= 1 || Variable8 >= 1 ) ? "block" : "none";
document.getElementById("div2").style.display =
( Variable2 >= 1 ) ? "block" : "none";
document.getElementById("div3").style.display =
( Variable1 >= 1 && Variable2 >= 1 && Variable3 >= 1 ) ? "block" : "none";