double onload cancelling each other

**adamschroeder** · May 11, 2011 15:19

Hi Guys,

I have two javascript onloads in my form which seem to be cancelling each other out. The first- onload="checkMyBox"- works fine, which means the calendar stays hidden until the ckeckbox is clicked.
However the second script that is supposed to show text ("I am an organized person") only after image is clicked does not work. It always shows the text.

I tried playing with it, and realized that if I erase the first <body onload="checkMyBox('c2','div1')"> the second onload works, meaning that the text will stay hidden until I click on image.

Does anybody know why is that and how I can fix it?
Any help appreciated.
Thank you.

Code JavaScript:

<script type="text/javascript"> 
function checkMyBox(trigger,toggled){        
var mcb = document.getElementById(trigger);        
var cal = document.getElementById(toggled);        
if(mcb.checked == false){            
cal.style.display = 'none';        } else {            
cal.style.display = 'block';        }    };
</script>
 
<style type="text/css">
<!-- 
.hidden {display:none} 
-->
</style>

HTML Code:

<form action="register-civ.php" method="post" name="example">
<body onload="checkMyBox('c2','div1')">
<input type="checkbox" name='c2' id="c2" value="check me 2" onclick="checkMyBox('c2','div1')"> Specific date<p/>
<div id="div1">
calendar I have for user
</div></body>
<br />

<body onload="document.getElementById ('bettie-bio').className = 'hidden'">
<div style="text-align: left;">
<img alt="Click for example" onclick="document.getElementById ('bettie-bio').className = document.getElementById ('bettie-bio').className == 'hidden' ? '' : 'hidden'" src="images/example_0.jpg">
</div>
<p id="bettie-bio">I am an organized person.</p>
</body></form>

**chris.upjohn** · May 11, 2011 16:44

My main concern is how you have structured your HTML as its 100% invalid, HTML only allows for 1 <body> tag/element on the page. Below i have posted both your javascript and HTML so they are both valid and should work fine.

Code JavaScript:

function checkMyBox(trigger,toggled) {
    var mcb = document.getElementById(trigger)
    var cal = document.getElementById(toggled);
 
    cal.style.display = (mcb.checked == false) ? 'none' : 'block';
}
 
window.onload = function() {
    checkMyBox('c2', 'div1');
    document.getElementById('bettie-bio').className = 'hidden';
};

Code HTML4Strict:

<form action="register-civ.php" method="post" name="example">
    <input type="checkbox" name="c2" id="c2" value="check me 2" onclick="checkMyBox('c2','div1')" /> Specific date
    <div id="div1">
        calendar I have for user
    </div>
    <br />
    <div style="text-align: left;">
        <img alt="Click for example" onclick="document.getElementById('bettie-bio').className = document.getElementById('bettie-bio').className == 'hidden' ? '' : 'hidden'" src="http://www.sitepoint.com/forums/images/example_0.jpg" />
    </div>
    <p id="bettie-bio">I am an organized person.</p>
</form>

**adamschroeder** · May 11, 2011 18:04

Thank you SgtLegend,
I used your code and obviously it worked.
But why do we add the checkMyBox('c2', 'div1') line of code to the window.onload = function?

I tried erasing that line of code and it obviously didn't work, but I don't understand why.

Oh, and thanks for the tip. I am extremely new at this so I didn't know html can only have one body tag.

**chris.upjohn** · May 12, 2011 03:13

Your welcome

But why do we add the checkMyBox('c2', 'div1') line of code to the window.onload = function?

I simply followed the same code you had within your HTML

I tried erasing that line of code and it obviously didn't work, but I don't understand why.

To me it makes no sense that it wouldn't work without this line as its part of the checkbox onclick event. Is there a working demo of the page i can see?

**adamschroeder** · May 12, 2011 10:24

I think I didn't express myself correctly. By asking you the checkMyBox question I was just trying to understand the javascript function and how it works. You know so I can learn from it and then write my own javascript.

When I erased part of the code you gave me (the CheckMyBox line), the text did not stay hidden. Again, I just did that so I could learn/understand what each line in the window.load function serves for.

**chris.upjohn** · May 12, 2011 18:17

The basic concept of window.onload is that its for functions and methods that are needed when the DOM has fully loaded. Say for instance you try to select an element(s) on the page before it has fully loaded the DOM using document.getElementById() this would cause an undefined error and end the script where as window.onload waits for the DOM to fully load before executing the code inside the "anonymous" function.

If your still a little confused see the example below

HTML Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Javascript Example</title>
<script type="text/javascript">
//<![CDATA[

    // This will NOT work due to the DOM not been fully
    // loaded yet!
    var ele = document.getElementById('myDiv');
    alert(ele.innerHTML);
    
    // This will work because the window.onload method waits
    // for the DOM to be fully loaded
    window.onload = function() {
        var ele = document.getElementById('myDiv');
        alert(ele.innerHTML);
    };
    
//]]>
</script>
</head>
<body>

<div id="myDiv">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

</body>
</html>

**paul_wilkins** · May 12, 2011 21:19

Originally Posted by SgtLegend

The basic concept of window.onload is that its for functions and methods that are needed when the DOM has fully loaded. Say for instance you try to select an element(s) on the page before it has fully loaded the DOM using document.getElementById() this would cause an undefined error and end the script

With the following code structure, you can select the element before the script, but not the element after it.

Code html4strict:

<div id="can_be_selected"></div>
<script>
...
</script>
<div id="cant_be_selected"></div>

To select the div that comes after, you need to wait until the element becomes available. This can be achieved by:

using setTimeout or setInterval
putting a script after the element, such as at the end of the body
using an event to trigger a function, such as domready or onload

Originally Posted by SgtLegend

where as window.onload waits for the DOM to fully load before executing the code inside the "anonymous" function.

The onload event also waits for images and everything else to load too, which can lead to quite a delay until the script runs. It's preferable to use the domisready event instead, as that fires when the DOM has loaded, but before much of the other slower loading content, such as images.

The point I want to make with this post though is this. Scripts don't need to wait for the complete DOM to finish loading. They can access anything that has loaded up to the point that the script is run.

**chris.upjohn** · May 12, 2011 22:08

Thanks for the great explanation paul, i have in the past used a domisready event to load jQuery dynamically into a page and i agree that its a more powerful way to fire code just for the DOM.

User Tag List

Thread: double onload cancelling each other

Thread Tools

Display

double onload cancelling each other

Bookmarks

Bookmarks

Posting Permissions