CODEWITHSUNDEEP
javascripthtml
Dave Voyce
Dave Voyce

Reputation: 7

Hide Div Using JS (Simple)

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>

Upvotes: 0

Views: 89

Answers (2)

user2575725
user2575725

Reputation:

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';
}

Upvotes: 2

lv0gun9
lv0gun9

Reputation: 621

// 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>

Upvotes: -1

Related Questions