Mistake in my getElementById code?

Forum Moderators: open

Message Too Old, No Replies

Mistake in my getElementById code?

vikasvrao

6:35 am on Sep 10, 2009 (gmt 0)

Hi guys,
I'm trying to hide a div and change the style of another div through javascript.
Here's my javascript method:

function hideRegisterDiv(){
document.getElementById("signupForm").style.display="none";
document.getElementById("loginbox").style="margin:40px auto 120px; width:300px";
}

The divs under question...
<form name="signupForm" id="signupForm" action="signup.do" method="POST">
<div id="register" style="width:400px; margin:44px 50px 120px 0px; float:left;">
........
</div>
</form>

Is there something I'm missing here? Firebug shows my document.getElementById() calls return null.

Please help.

daveVk

7:46 am on Sep 10, 2009 (gmt 0)

document.getElementById("loginbox").style="margin:40px auto 120px; width:300px";

Don't think you can assign text to style object directly.

Probably better to set up two css entrys say for classes normLogon and altLogon, and change class namename.

eg
document.getElementById("loginbox").className="altLogon";

vikasvrao

2:44 pm on Sep 10, 2009 (gmt 0)

Thanks dave for pointing that out.
But my getElementById() method still returns null. I have no idea why

rocknbil

4:15 pm on Sep 10, 2009 (gmt 0)

I tested your code as is and get "Error: setting a property that has only a getter." I think you need to set each style individually, like

document.getElementById("loginbox").style.margin="40px auto 120px";
document.getElementById("loginbox").style.width="300px";

But it's more than that. First, validate yor document, you probably have HTML errors causing the null.

Second, one must ask why you have a div inside the form, complicating the overall structure. Why can't you apply your styles directly to the form? You will have to adjust your CSS, that is, apply darkbox to the form, not the div, etc.

Last, when you get in trouble, put borders on the errant elements to see what's going on.

I got this to work. Note the addition of return false to prevent the link from navigating, if that's your triggering event.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd"> 
<!-- doctype on one line --> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
<script type="text/javascript"> 
function hideRegisterDiv(){ 
 document.getElementById("signupForm").style.display="none"; 
 document.getElementById("loginForm").style.margin="40px auto 120px"; 
 document.getElementById("loginForm").style.width="300px"; 
return false; 
} 
</script> 
</head> 
<body> 
<form name="signupForm" id="signupForm" action="signup.do" method="POST"  
style="width:400px; margin:44px 50px 120px 0px; float:left; border:1px solid #ff0000;"> 
<!-- line breaks only to prevent post from going wide --> 
form 1 
</form> 
<form name="loginForm" id="loginForm" class="darkbox" action="j_spring_security_check"  
method="POST" style="margin:40px auto 120px 10px; width:280px; float:right; border:1px solid #000000;"> 
<!-- line breaks only to prevent post from going wide --> 
form 2 
</form> 
<p><a href="#" onClick="return hideRegisterDiv();">Hide</a></p> 
</body> 
</html>

vikasvrao

5:47 pm on Sep 10, 2009 (gmt 0)

What you have works, I still dont know why the HTML I have here doesnt work.
I hate dumping a bunch of code on the world, but here is a snapshot:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title> Beta</title>
<script type="text/javascript">
function hideRegisterDiv(){ document.getElementById("signupForm").style.display="none";}
</script>

</head>
<body class="yui-skin-sam">
<div id="PageContainer">
<div id="Main" class="reg">
<div id="EditCartSections">
<div id="contentAuction" style="height:auto">
<center>
<script type="text/javascript">
hideRegisterDiv();
</script>

<span style="font-size:115%"> Thanks for creating an account!</span><br />
<span style="font-size:115%"> Now you can login </span>
</center>
<form name="signupForm" id="signupForm" action="signup.do" method="POST">
<div style="width:800px; padding-left:80px;">
<div id="register" style="width:400px; margin:44px 50px 120px 0px; float:left;">
<h2 style="text-align:center;margin-top:6px;color:#a00;border-bottom:1px dashed #dca; padding-bottom:11px;">

New users: create an account
</h2>
Join our community of users and compete for exceptional cash bonuses
<p>
Joining is free and easy and we respect your privacy.
</p>
<div align="center">
<br> <button type="submit"><div style="padding:3px 10px;font-size:16px">   Register now   </div></button>

</div>
</div>
</div>
</form>

<h2 style="text-align:center;margin-top:6px;color:#a00;border-bottom:1px dashed #dca; padding-bottom:11px;">
Registered users: log in
</h2>

<table style="margin: 0px 10px 10px; width: 260px;">
<tr>
<td class="label" align="right" valign="top" nowrap><label for="email">Email:</label> </td>
<td style="padding-bottom:6px">
<input type='text' name='j_username' id="username"
value=''
onKeyPress="return submitEnter(event)" maxlength="50" style="width:200px;">
</td>
</tr>
<tr>

<td class="label" align="right" nowrap><label for="email">Password:</label> </td>
<td>
<input type='password' name='j_password' onKeyPress="return submitEnter(event)" maxlength="25" style="width:200px;">
</td>
</tr>
<tr>
<td> </td>
<td style="padding-top:6px">

<input type="checkbox" id="rememberEmail" name='_spring_security_remember_me' style="margin:0;"/>
<label for="rememberEmail" style="font-size:96%;">  Remember my email address</label>
</td>
</tr>
<tr>
<td colspan="2" align="center" nowrap style="padding-top:6px">
<div style="margin-bottom:10px;margin-left:20px"><a style="font-size: 96%;" href="passwordReminder.do">Forgot your password?</a></div>

</div>
</div>

</div>
</div>

</div>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>

</body>
</html>

rocknbil

9:49 pm on Sep 10, 2009 (gmt 0)

Haha! Here it is!

Source code is read top-down. You execute the request to hideRegisterDiv before "signupForm" is rendered.

Move that to the bottom of the page, or, more gracefully,

if this is all you need to do, you don't even need a function.