Quote:
Originally Posted by duke123
Hi,
I have two divs (image & story) both positioned in a manner so that one overlays the other. The purpose of the code below is to hide one and show the other on a button click. So whenever we click the button, whichever div is hidden becomes visible and the other gets hidden. The initial state on page load (through the css is - "image" visible, "story" invisible through the display property (block/none).
But when I use the code below, i don't get the desired effect, in fact after 2 clicks the button goes hidden! I tried alerts in the ifs to see how the code is flowing but seems like the correct ifs are not getting executed for some reason. Could anyone help me on this. This I thought should have been simple to do!
I must be making stupid mistake. Please help...
[HTML]<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "test.css">
<script type = "text/javascript">
function switch()
{
elem = document.getElementById('image');
elem1 = document.getElementById('story');
if (elem.style.display == 'block')
{
elem.style.display = 'none';
elem1.style.display = 'block';
}
else
{
elem.style.display = 'block';
elem1.style.display = 'none';
}
}
</script>
</head>
<body>
<div id = "image" class = "image">image</div>
<div id = "story" class = "story"> story </div>
<div id = "next" class = "next"> next </div>
<input type = "button" value = "Click Here" onClick = "switch();">
</body>
<html>[/HTML]
Hi all,
Couldn't wait for the reply. So looked a little further. And found that the issue lay in the fact that when we use the 'display' property in CSS for hiding elements, the recovered space gets used up by the following elements. That explains why my button was going missing. And as for the if clause not working, that was fixed by a simply init().
The modified version of the code is given below so that if someone makes a simple mistake as I did in future can look in here and laugh at himself! :)
Any better method suggestions are welcome. I know we can use a boolean flag to flip, but that's just "another" way and not sure whether that's the "better" way.
[HTML]<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "test.css">
<script type = "text/javascript">
function test()
{
elem = document.getElementById('image');
elem1 = document.getElementById('story');
if ((elem.style.display) == 'block')
{
elem.style.display = 'none';
elem1.style.display = 'block';
}
else
{
elem.style.display = 'block';
elem1.style.display = 'none';
}
}
function init()
{
document.getElementById('image').style.display = 'block';
document.getElementById('story').style.display = 'none';
}
</script>
</head>
<body onload = "init()">
<div id = "image" class = "image">image</div>
<div id = "story" class = "story"> story </div>
<div id = "next" class = "next">
next <input type = "button" value = "Click Here" onClick = "test();">
</div>
</body>
<html>[/HTML]
