Display <div> on top using zIndex and JavaScript increment

[myyoungfamily]

I'm trying to figure out how I can call and element based on it's unique id and change the style to display:block and the z-index:+1. I've got the display:block working but I can't get the JavaScript to increment the z-index by one(+1) each time an element gets called. Here's what I've got so far...

<script type="text/javascript">
var z=10;
function ShowHide(id) {
  document.getElementById(id).style.display = "block";
  document.getElementById(id).style.zIndex = "z";
  "z++";

}
</script>

[Twey]

var z = 10;
function ShowHide(id) {
  document.getElementById(id).style.display = "block";
  document.getElementById(id).style.zIndex = z++;
}

Or, to literally just increase the zIndex by one:

function ShowHide(id) {
  var k = document.getElementById(id).style;
  k.display = "block";
  k.zIndex = parseInt(k.zIndex) + 1;
}

[myyoungfamily]

Sweet!!! YOU DA MAN Work's great in Firefox, Safari, Mac IE 5.2

Thanks...

[myyoungfamily]

One other thing...
What is the best way to get that Script to return false so I don't have to put "return false" every time I call the script in my html?

[Twey]

Add

return false;

before the closing brace?

[myyoungfamily]

Ok, this isn't completely working. It shows it but then it dissapears real quick?
When I put the "return false;" in the onClick it works...

<script type="text/javascript">
var z = 10;
function ShowHide(id) {
  var k = document.getElementById(id).style;
  k.display = "block";
  k.zIndex = parseInt(k.zIndex) + 1;
return false;
}
</script>

[Twey]

Remember that you have to return the function's return value:

onclick="return ShowHide('anID');"

[myyoungfamily]

So, how do I do that inside the script and not in the onClick? Just putting "return false;}" didn't work?

[Twey]

You have to explicitly return a value in the event handler, yes.

[myyoungfamily]

Ok, so I can't use "return false" in the <script> section.

Since I'm pretty new to JavaScript, can you explain the differences / benefits of these two scripts

#1

<script type="text/javascript">
var z = 10;
function ShowHide(id) {
  document.getElementById(id).style.display = "block";
  document.getElementById(id).style.zIndex = z++;
}
</script>

#2

<script type="text/javascript">
var z = 10;
function ShowHide(id) {
  var k = document.getElementById(id).style;
  k.display = "block";
  k.zIndex = parseInt(k.zIndex) + 1;
return false;
}
</script>