Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 23 of 23
  1. #16
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I think you might be confused about the order in which things happen.

    The page reads the code from top to bottom, starting at the head. When it gets to the head, it incorporates any external scripts as if they were part of the main page. If a function is called in one of those external scripts, it is the same as calling it in the head.

    Once it is finished reading the head, it reads the body. If you call a function in the head that is supposed to act on elements in the body (such as attach event listeners to them) it will fail, because at the time that the page is reading the head the elements in the body don't exist yet

    If you would like a practical demonstration, run the following code, then run it again with the javascript in the head. Then run it again with the javascript left in the head (and ask your professor why on earth you are being required to do this) but with the bit that attaches the event listeners wrapped in a window onload function:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <head>
    <style>
    td{width:30%}
    </style>
    
    </head>
    
    <body>
    
    <table id="mytable" width="75%" border="1">
      <tr>
        <td>Name</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Age</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Job</td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <script>
    if (window.addEventListener)
    addEvent = function(ob, type, fn ) {
    ob.addEventListener(type, fn, false );
    };
    else if (document.attachEvent)
    addEvent = function(ob, type, fn ) {
    var eProp = type + fn;
    ob['e'+eProp] = fn;
    ob[eProp] = function(){ob['e'+eProp]( window.event );};
    ob.attachEvent( 'on'+type, ob[eProp]);
    };
    
    var therows=document.getElementById("mytable").rows;
    for (var i = 0; i < therows.length; i++) {
    addEvent(therows[i],'mouseover',function(){this.style.backgroundColor="red"});
    addEvent(therows[i],'mouseout',function(){this.style.backgroundColor="white"});
    }
    </script>
    </body>
    </html>
    (I am not using your attachEventListener code because it fails in IE)

  2. #17
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Im not calling any function from the head. im only connecting to the js file from the head by using:
    Code:
     <script type="text/javascript" src="events.js" ></script>
    I am not allowed to use any javascript in any other place than in the js file.

  3. #18
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    And by the way. All my javascript code is working except from the rows color changing.

  4. #19
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    yes, and in that file you call the addLoadListener function.

    But sorry - I misread it, and it works fine (that function call does actually attach a window onload listener). There's obviously a problem somewhere else. Here's your code with the other bits taken out:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script>
    function addLoadListener(fn){
      if (typeof window.addEventListener != 'undefined')  {
        window.addEventListener('load', fn, false);
      }
      else if (typeof document.addEventListener != 'undefined')  {
        document.addEventListener('load', fn, false);
      }
      else if (typeof window.attachEvent != 'undefined')  {
        window.attachEvent('onload', fn);
      }
    };
    
    function attachEventListener(target, eventType, functionRef, capture){
      if (typeof target.addEventListener != "undefined")  {
        target.addEventListener(eventType, functionRef, capture);
      }
      else {
        target.attachEvent("on" + eventType, functionRef);
      }
      return true; 
    };
    
    function  validateForm(){
    	 var therows=document.getElementById("mytable").rows;
    	 for (var i = 0; i < therows.length; i++) {
    		 attachEventListener(therows[i],'mouseover',function(){this.style.backgroundColor="red"});
    		 attachEventListener(therows[i],'mouseout',function(){this.style.backgroundColor="white"});
    	}
    };
    
    addLoadListener(validateForm);
    </script>
    </head>
    <style>
    td{width:30%}
    </style>
    </head>
    <body>
    <table id="mytable" width="75%" border="1">
      <tr>
        <td>Name</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Age</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Job</td>
        <td></td>
        <td></td>
      </tr>
    </table>
    </body>
    </html>
    still doesn't work in IE, though, whereas the other attach event code does.

    what does your error console say?

  5. #20
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I don`t have an error consol.
    Im working with notepad++

  6. #21
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    do you have a web browser and access to google?

  7. #22
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sure i have

  8. #23
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    well then I would suggest using your web browser to google error console and then reading how you can use the error console of your web browser to find what is wrong with your code.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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