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

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

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

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

Down voted because you did not point out your correction to their code, you've just given them a fixed script without any explaining...
@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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related