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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Trouble with Javascript if, else statements

    I'm a little new to Javascript so I apologise if this is an easily resolved problem.

    This is my Javascript code:
    Code:
    function display(){
    		if(document.getElementById('one').style.display="none"){
    		document.getElementById('one').style.display="block";
    		}
    		else if(document.getElementById('one').style.display="block"){
    		document.getElementById('two').style.display="block";
    		}
    		else{
    		document.getElementById('three').style.display="block";
    		}
    	}
    This is my HTML:
    Code:
    <html>
    ....
    <style>
    #one,#two,#three {
    display:none;
    }
    </style>
    ....
    <ul>
    		<li id="one">1</li>
    		<li id="two">2</li>
    		<li id="three">3</li>
    		<li id="click" onclick="display()">+</li>
    	</ul>
    The idea is when I click the list item 'click' the display() function will be called and make list item 'one' appear. If list item 'one' is already visible however, list item 'two' will appear, etc. When I click it, list item one appears fine as it should, but if I click it again list item two does not appear, and I can't work out why. I could really do with some help, thank you in advance!
    Last edited by Liquidizer; 05-21-2012 at 07:11 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    If understand you correctly , you want to display elements "one", "two" and three" sequentially each time the + symbol is clicked.

    <script type = "text/javascript">

    var count = 1;
    function display(){
    document.getElementById('one').style.display="none";
    document.getElementById('two').style.display="none";
    document.getElementById('three').style.display="none"

    if (count == 1) {
    document.getElementById('one').style.display="block";
    }
    if (count == 2) {
    document.getElementById('two').style.display="block";
    }
    if (count == 3) {
    document.getElementById('three').style.display="block";
    }
    count++;
    if (count >3) {count =1}
    }

    </script>


    That shows the elements one at a time. If you want to add an element on each click, simply delete the three lines in blue.

    All the misery this world contains comes from seeking pleasure for oneself; all the joy this world contains comes from seeking happiniess for others. - Buddist aphorism

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Liquidizer (05-21-2012)

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,101
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Smile

    It's earlier in London, so 'Philip M' gets to answer first, but this was my take on your problem.
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    //<![CDATA[
    function $_(IDS) { return document.getElementById(IDS); }
    
    function display(){
      if ($_('one').style.display == "none") {
        $_('one').style.display = "block";
      } else {
        if ($_('two').style.display == "none"){
          $_('two').style.display = "block";
        } else {
          $_('three').style.display = "block";
          $_('plusMore').style.display = 'none';
        }
      }
    }
    //]]>
    </script>
    
    <style>
    li {  cursor:pointer; }
    </style>
    </head>
    <body>
    <ul>
     <li id="one" style="display:none">1 (one)</li>
     <li id="two" style="display:none">2 (two)</li>
     <li id="three" style="display:none">3 (three)</li>
     <li id="plusMore" onclick="display()">+</li>
    </ul>
    </body>
    </html>
    Part of your problem was the IF statements were comparing the results of the assignment (=) instead of the logic (==)

    I also removed the '+' after the last (three) because it might confuse the user to click and have nothing happen.

  • Users who have thanked jmrker for this post:

    Liquidizer (05-21-2012)

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you! In the end I went with Philip M's response, yours confused me somewhat jmrker, but then I am quite new to Javascript!

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,101
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Liquidizer View Post
    Thank you! In the end I went with Philip M's response, yours confused me somewhat jmrker, but then I am quite new to Javascript!
    No problem with that at my end.
    Maybe sometime in the future you will return and see some added benefits to my solution.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by Liquidizer View Post
    Thank you! In the end I went with Philip M's response, yours confused me somewhat jmrker, but then I am quite new to Javascript!
    I expect that you were confused by jmrker's naming of a function $_ which is not very indicative. Change $_ throughout to something like getElementid and it will probably become a lot clearer.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,101
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Philip M View Post
    I expect that you were confused by jmrker's naming of a function $_ which is not very indicative. Change $_ throughout to something like getElementid and it will probably become a lot clearer.
    Almost. That's document.getElementById() which is equivalent to the $_()
    The ID value goes inside the parentheses.

    And yes, it works that way as well. Just a typing shortcut because...

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by jmrker View Post
    Almost. That's document.getElementById() which is equivalent to the $_()
    The ID value goes inside the parentheses.

    And yes, it works that way as well. Just a typing shortcut because...
    Yes, but $_ is not (in standard Javascript) shorthand for getElementById. It is the name you have assigned to a function.

    function $_(IDS) { return document.getElementById(IDS); }

    But it is certainly a useful way of creating a typing shortcut. I often mis-spell document as docuemnt.
    Last edited by Philip M; 05-22-2012 at 09:06 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    Yes, but $_ is not (in standard Javascript) shorthand for getElementById.
    There is no such standard shortcut - people are free to choose whatever they like. The authors of the JavaScript in the jQuery and prototype libraries both chose to use $() as a shorthand for that call but each person can use whatever they like if they decide to introduce such a shortcut in their own JavaScript. The only reason that particular shortcut is well known is because lots of people use the JavaScript written by those two JavaScript experts.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,101
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by Philip M View Post
    I expect that you were confused by jmrker's naming of a function $_ which is not very indicative. Change $_ throughout to something like getElementid and it will probably become a lot clearer.
    Quote Originally Posted by Philip M View Post
    Yes, but $_ is not (in standard Javascript) shorthand for getElementById. It is the name you have assigned to a function.

    function $_(IDS) { return document.getElementById(IDS); }

    But it is certainly a useful way of creating a typing shortcut. I often mis-spell document as docuemnt.
    My observation was to address the 'getElementid' reference (in the 1st post) to be 'document.getElementById' instead.
    Had the OP made the substitution as you suggested in the first post, my code would not have worked at all.

    I use the defined shortcut only because I make the same kind of typing errors you indicated in the 2nd post.
    I do not use JQuery or Prototype very often, so I do not have conflicts. If ever I do start using them, I suspect I'll have a problem with conflicting definitions (possibly).


  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by jmrker View Post
    My observation was to address the 'getElementid' reference (in the 1st post) to be 'document.getElementById' instead.
    Had the OP made the substitution as you suggested in the first post, my code would not have worked at all.
    Yes it would! I am simply renaming the function to getElementid which is not getElementById!

    Code:
    function getElementid(IDS) { return document.getElementById(IDS) }

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,101
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by Philip M View Post
    Yes it would! I am simply renaming the function to getElementid which is not getElementById!

    Code:
    function getElementid(IDS) { return document.getElementById(IDS) }
    OK, miss-understood what you were recommending.

    You would save 11 keystrokes for each usage and mine would save 19, but both would accomplish the same goal.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by jmrker View Post
    OK, miss-understood what you were recommending.

    You would save 11 keystrokes for each usage and mine would save 19, but both would accomplish the same goal.
    That suggestion was for the benefit of the OP. Your $_ is fine for me, but I know what it is shorthand for! I was merely saying that a more descriptive name for the function might make it clearer to the OP.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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