SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast adamschroeder's Avatar
    Join Date
    Mar 2011
    Location
    World
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    double onload cancelling each other

    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>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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>

  3. #3
    SitePoint Enthusiast adamschroeder's Avatar
    Join Date
    Mar 2011
    Location
    World
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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?

  5. #5
    SitePoint Enthusiast adamschroeder's Avatar
    Join Date
    Mar 2011
    Location
    World
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    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:
    1. using setTimeout or setInterval
    2. putting a script after the element, such as at the end of the body
    3. using an event to trigger a function, such as domready or onload


    Quote Originally Posted by SgtLegend View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •