Javascript - CSS, visibility onclick

Question

I am very new to Javascript. I have been looking into using Javascript to edit css style properties. I have searched the web and looked at a lot of different problems. Even with all of that, it is probably my inexperience as to why I can't figure out what is wrong with my code. What adds to the problem is that there are so many ways to do this. Anyway here are the specifics.

What I want it to do: When someone clicks on the link in the code, I want the hidden DIV (which will just be near the top of my waiting to be called on) to have its visibility switched to visible so as to create a new layer on the page.

My code:

<html>
    <head>
        <script language="javascript">
            function newwindow() {
                var showme = document.getelementbyid("testing");
                showme.style.visibility = "visible";
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="newwindow()">Show me my hidden layer</a>
        <div id="testing" style="position: absolute; visibility: hidden; left: 50%; top: 50%;
    border: 1px solid darkblue; width: 400px; height: 300px; line-height: 300px;     
    text-align: center; vertical-align: middle;
    margin-top: -150px; margin-left: -200px; background: lightgray">HELLO!!!</div>
    </body>
</html>

Now, I know there are a lot of ways to do this. But can someone show me what to tweak in the code I gave to make the way I am writing this work? Thanks so much for your time.

You should use jQuery, it's a fantastic javascript library. jquery.com — Dylan Cross
– Dylan Cross, Commented Dec 31, 2012 at 3:16

Pranav 웃 · Accepted Answer · 2012-12-31 03:16:51Z

4

It is document.getElementById not document.getelementbyid

Working Demo

answered Dec 31, 2012 at 3:16

Pranav 웃

8,4676 gold badges41 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pete_1 Over a year ago

Thanks so much guys! Didn't realize Javascript was case sensitive.

Cliffmeister Over a year ago

@user1935137, how about setting this as the correct answer? :)

Manish Nagar · Accepted Answer · 2012-12-31 03:46:23Z

use this code

    <html>
        <head>
            <script language="javascript">
                function newwindow() {
                    var showme = document.getElementById("testing");
                    showme.style.visibility = "visible";
                }
            </script>
        </head>
        <body>
            <a href="#" onclick="newwindow()">Show me my hidden layer</a>
            <div id="testing" style="position: absolute; visibility: hidden; left: 50%; top: 50%;
        border: 1px solid darkblue; width: 400px; height: 300px; line-height: 300px;     
        text-align: center; vertical-align: middle;
        margin-top: -150px; margin-left: -200px; background: lightgray">HELLO!!!</div>
        </body>
    </html>

Collectives™ on Stack Overflow

Javascript - CSS, visibility onclick

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related