show element not working

Question

Hi I have a problem with my function, when I call it to show my hidden div it does not work. It does not show the hidden div. I followed previous examples from what have been posted in stackoverflow but still my code does not work.

This is my html file

<div id="playTheGame" class="css/outer" style="display:none;" >
    <div class="css/inner">      
        <h1>Choose!</h1>
                    <section id="hand">
                <img src="images/rock.png">
                <img src="images/paper.png">
                <img src="images/scissors.png">
            </section>
 </div>
 </div>

My Function

<script>
function logSuccess(){
    document.getElementById("playTheGame").style.visibility="visible";
}
</script>

The Button I used for the function

<input type="button" onclick="logSuccess()" value="Show">

http://stackoverflow.com/q/133051/1618713 this question has many good answers for visibility hidden vs display none confusion. — Faisal Sayed, Sep 14 '13 at 17:41

score 1 · Answer 1 · answered Sep 14 '13 at 16:52

1

Change your code to this

document.getElementById("playTheGame").style.display = "block";

Since you hid it using the display property, show it using the display property.

answered Sep 14 '13 at 16:52

Thank you so much. This worked out well for me. I was referring to this website at first. http://www.w3schools.com/jsref/prop_style_visibility.asp and thus I got the code visibility="visible" – Ryan Tan Sep 14 '13 at 16:54
I guess, Jeffman is right, since you used display to hide it, you need to use display to get it back too! – Afzaal Ahmad Zeeshan Sep 14 '13 at 16:55
For your information http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – Girish Thimmegowda Sep 14 '13 at 16:56
Sorry for the very noob question. Just started learning javascript. Thanks guys! This helped me a lot. – Ryan Tan Sep 14 '13 at 16:59
One last question so if I want to hide it should I use document.getElementById("playTheGame").style.visibility="hidden"; ? or there is another way for this? – Ryan Tan Sep 14 '13 at 17:02
That will work, but you want to be consistent, or the page will jump around. `document.getElementById("playTheGame").style.display = "none";` – Sep 14 '13 at 17:07

Afzaal Ahmad Zeeshan · Answer 2 · 2013-09-14T17:18:46.827

There are two options for this:

One using JavaScript:

object.style.display="block"; // where object will be the playThemGame id element..

And the other one using jQuery; JavaScript library.

$("#playTheGame").show();

The option two won't work, because you will have to write the event function too, So just use the first one as:

document.getElementById("playTheGame").style.display="block";

Edit:

Since you are using

document.getElementById("playTheGame").style.display="block";

To disply the result, then you must use this to remove the display!

document.getElementById("playTheGame").style.display = "none"; to hide it back!

The basic idea is that, this will just shift the object-->style-->display's value to none Its not going to add any more attribute. Its just going to shift current attribute's value.

One last question so if I want to hide it should I use document.getElementById("playTheGame").style.visibility="hidden"; ? or there is another way for this? — Ryan Tan, Sep 14 '13 at 17:02

show element not working

2 Answers2