Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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.
    Code:
    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.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts
    Use the 'switch' statement in conjunction with multiple 'case' checks.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    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
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    You can also set and unset flags, which can reduce the number of conditional statements.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Carlos13 View Post
    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.
    Code:
    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 ?

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by Carlos13 View Post
    Code:
    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.

    Code:
    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
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,650 Times in 4,612 Posts
    Yes. Exactly.

    And you can extend that to direct control very easily:
    Code:
    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";
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •