Tip: Click here to scan for System Errors and Optimize PC performance

Back To Programming / Scripting / Coding Forum

Javascript on load

  • Bobbo171
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jun 27, 2004
  • Posts: 174
  • Status: Offline

Post January 28th, 2005, 6:11 pm

i have this javascript on my page to hide divs once the page loads, but i get an error that says "document.div1 has no properties" and before i had document.getElementByID(div1).style, and that brought back an error that said div1 is not defined
this is what i currently have, and it doesnt work
Code: [ Download ] [ Select ]
document.onload = hide();
function hide(){
nav1=document.div1.style
nav2=document.div2.style
nav1.display='none';
nav2.display='none';
}
  1. document.onload = hide();
  2. function hide(){
  3. nav1=document.div1.style
  4. nav2=document.div2.style
  5. nav1.display='none';
  6. nav2.display='none';
  7. }
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 28th, 2005, 6:11 pm

  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post January 28th, 2005, 7:57 pm

Try changing it to:

Code: [ Download ] [ Select ]
window.onload = hide;


If you include the parentheses after hide it will call the function and try to assign a return value, rather than waiting until the page finishes loading to call the function. Since the browser hasn't parsed the divs yet, you get the no properties errors.
Free Programming Resources

Post January 29th, 2005, 2:58 am

I don't think you can assign style properties of objects as js vars, only the objects themselves. Try the following:
Code: [ Download ] [ Select ]
document.onload = hide();
function hide(){
nav1=document.div1;
nav2=document.div2;
nav1.style.display='none';
nav2.style.display='none';
}
  1. document.onload = hide();
  2. function hide(){
  3. nav1=document.div1;
  4. nav2=document.div2;
  5. nav1.style.display='none';
  6. nav2.style.display='none';
  7. }
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post January 29th, 2005, 2:27 pm

Since the style property is itself an object it should work:

Code: [ Download ] [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function setDivDisplay(value) {
    if(document.getElementById) {
        var nav1 = document.getElementById('div1').style;
        var nav2 = document.getElementById('div2').style;
        nav1.display = value;
        nav2.display = value;
        return true;
    }
    return false;
}
function hide() {
    setDivDisplay("none");
}
window.onload = hide;
// -->
</script>
</head>
<body>
<div id="div1">blah blah</div>
<div id="div2">yada yada</div>
<a href="#" onclick="setDivDisplay('block');return false;">show</a> -
<a href="#" onclick="setDivDisplay('none');return false;">hide</a>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. function setDivDisplay(value) {
  7.     if(document.getElementById) {
  8.         var nav1 = document.getElementById('div1').style;
  9.         var nav2 = document.getElementById('div2').style;
  10.         nav1.display = value;
  11.         nav2.display = value;
  12.         return true;
  13.     }
  14.     return false;
  15. }
  16. function hide() {
  17.     setDivDisplay("none");
  18. }
  19. window.onload = hide;
  20. // -->
  21. </script>
  22. </head>
  23. <body>
  24. <div id="div1">blah blah</div>
  25. <div id="div2">yada yada</div>
  26. <a href="#" onclick="setDivDisplay('block');return false;">show</a> -
  27. <a href="#" onclick="setDivDisplay('none');return false;">hide</a>
  28. </body>
  29. </html>


If you were to try and assign the individual properties of the style object I think you would run into that problem though.
Free Programming Resources
  • Bobbo171
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Jun 27, 2004
  • Posts: 174
  • Status: Offline

Post January 29th, 2005, 2:46 pm

i got it to work with this
Code: [ Download ] [ Select ]
window.onload = hide;
function hide(){
nav1=document.getElementById('div1').style
nav2=document.getElementById('div2').style
nav1.display='none';
nav2.display='none';
  1. window.onload = hide;
  2. function hide(){
  3. nav1=document.getElementById('div1').style
  4. nav2=document.getElementById('div2').style
  5. nav1.display='none';
  6. nav2.display='none';

thanks a lot :D

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 165 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.