Resolved Trouble with Javascript if, else statements

Liquidizer · 05-21-2012, 06:25 PM

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!

Philip M · 05-21-2012, 06:42 PM

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

jmrker · 05-21-2012, 06:53 PM

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.

Liquidizer · 05-21-2012, 07:11 PM

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!

jmrker · 05-21-2012, 07:47 PM

Quote:

Originally Posted by Liquidizer

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.

Philip M · 05-21-2012, 09:51 PM

Quote:

Originally Posted by Liquidizer

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.

jmrker · 05-21-2012, 11:57 PM

Quote:

Originally Posted by Philip M

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...

Philip M · 05-22-2012, 09:02 AM

Quote:

Originally Posted by jmrker

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.

felgall · 05-22-2012, 09:47 AM

Quote:

Originally Posted by Philip M

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.

jmrker · 05-22-2012, 02:39 PM

Quote:

Originally Posted by Philip M

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

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).

Philip M · 05-22-2012, 03:52 PM

Quote:

Originally Posted by jmrker

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) }

jmrker · 05-22-2012, 04:49 PM

Quote:

Originally Posted by Philip M

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.

Philip M · 05-22-2012, 05:56 PM

Quote:

Originally Posted by jmrker

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.