Hide Div Using JS (Simple)

Question

Hi so What I need to do is eventually have regStart and regPage alternate visibility based on a click event, I'm not too worried about writing the JavaScript function but I simply can not get my regPage to hide in the first place. Here's my code. Simple answers please I'm new to JS.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">`enter code here`
<head>
<title>SuperSite</title>
<script language="JavaScript" type="text/javascript" >

    function setVisibility() {
        document.getElementByID('regStart').style.visibility = 'visibile';
        document.getElementByID('regPage').style.visibility = 'hidden';
    };
</script>
</head>
<body onload=setVisibility();>

    <div>
        <h1>SuperSite</h1>
        <hr />
        <p>Already a registered SuperSite user? Sign in with one of the following services.</p>
        <div class="icons">
            <img alt="facebook" src="/images/js project/FacebookDepressed.ico" />
            <img alt="google" src="/images/js project/GoogleDepressed.ico" />
            <img alt="Windows Live" src="/images/js project/WinLiveDepressed.ico" />
            <img alt="Yahoo!" src="/images/js project/YahooDepressed.ico" />
        </div>
        <ul>
            <li>sign in with your SuperSite username and password</li>
            <li>add another authentication service from the list above</li>
            <li>change your SuperSite password</li>
        </ul>
        <div id="regStart">
            <p>If you haven't already registered with SuperSite</p>
            <a id="regNow" href="">Register Now</a>
        </div>

        <div id="regPage">
            <p>Register to use SuperSite services with the following form:</p>
            <p>UserName:</p>
            <input id="UserName" type="text" />
            <p>Password:</p>
            <input id="Password1" type="password" />
            <p>Verify Password:</p>
            <input id="PasswordVerify" type="password" />
        </div>
    </div>
</body>
</html>

For future reference, remember the "wall of text" rule - no one wants to read through a wall of text. Please use the Snippet editor to include only the relevant HTML/CSS/ Javascript as often as possible. — Jhecht
– Jhecht, Commented Feb 16, 2015 at 2:14

score 2 · Accepted Answer · 2015-02-16 02:12:19Z

2

You have error at line:

document.getElementByID// ID, D is in uppercase

It is supposed to be:

document.getElementById //Id, d is in lowercase

Since your using visibility, the space will be occupied by the div even if its hidden.

You may use style's display property instead to remove those empty spaces.

CSS

#regStart{display:block;}
#regPage{display:none;}

OR with JavaScript

function setVisibility() {
    document.getElementById('regStart').style.display = 'block';
    document.getElementById('regPage').style.display = 'none';
}

edited Feb 16, 2015 at 2:12

answered Feb 16, 2015 at 2:04

user2575725

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

Comments

lv0gun9 · Accepted Answer · 2015-02-16 02:11:20Z

-1

// check the link : http://www.w3schools.com/jsref/prop_style_display.asp

<body onload="setVisibility()">

    <script language="JavaScript" type="text/javascript">
        function setVisibility() {
            document.getElementById('regStart').style.display = 'initial'; 
            document.getElementById('regPage').style.display = 'hidden';

        };
    </script>

    <div>
         <h1>SuperSite</h1>

        <hr />
        <p>Already a registered SuperSite user? Sign in with one of the following services.</p>
        <div class="icons">
            <img alt="facebook" src="/images/js project/FacebookDepressed.ico" />
            <img alt="google" src="/images/js project/GoogleDepressed.ico" />
            <img alt="Windows Live" src="/images/js project/WinLiveDepressed.ico" />
            <img alt="Yahoo!" src="/images/js project/YahooDepressed.ico" />
        </div>
        <ul>
            <li>sign in with your SuperSite username and password</li>
            <li>add another authentication service from the list above</li>
            <li>change your SuperSite password</li>
        </ul>
        <div id="regStart">
            <p>If you haven't already registered with SuperSite</p> <a id="regNow" href="">Register Now</a>

        </div>
        <div id="regPage">
            <p>Register to use SuperSite services with the following form:</p>
            <p>UserName:</p>
            <input id="UserName" type="text" />
            <p>Password:</p>
            <input id="Password1" type="password" />
            <p>Verify Password:</p>
            <input id="PasswordVerify" type="password" />
        </div>
    </div>

    </html>

answered Feb 16, 2015 at 2:11

lv0gun9

6218 silver badges24 bronze badges

2 Comments

Angry 84 Over a year ago

Down voted because you did not point out your correction to their code, you've just given them a fixed script without any explaining...

lv0gun9 Over a year ago

@Mayhem sorry about explaining. because I'm not good at English. sorry by the way.

Collectives™ on Stack Overflow

Hide Div Using JS (Simple)

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related