SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Accessing Event Handlers

    I've been reading this page on accessing event handlers and avoiding the inline ones. Suppose I want to hover over a link and make it display something else, I thought this is what I would put in the <head>:
    Code:
    <script type="text/javascript">
    var x = document.getElementById('question');
    x.onmouseover = function() {document.getElementById('answer').style.display='inline'}
    x.onmouseout = function() {document.getElementById('answer').style.display='none'}
    </script>
    The HTML being:
    Code:
    <a id="question" href="#">Question</a>
    <span id="answer" style="display:none;">The answer is 42</span>
    I've reread the article in the link but to no avail, I don't know what is wrong.

  2. #2
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This happens because the script is placed before the body so when this script gets executed the DOM strucuture of the page is not known and that's why document.getElementById('question') is null.

    What you could do:
    1. place the script in the body element just before </body> tag
    or
    2. make sure the DOM structure is known. You can do that by executing the script at window.onload.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
      <title>Hello!</title>
    <script type="text/javascript">
    
    window.onload=function(){
       var x = document.getElementById('question');
       x.onmouseover = function() {document.getElementById('answer').style.display='block'}
       x.onmouseout = function() {document.getElementById('answer').style.display='none'}
    }
    </script>
    </head>
    
    <body>
    <a id="question" href="#">Question</a>
    <span id="answer" style="display:none;">The answer is 42</span>
    
    </body>
    
    </html>

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Excellent, thanks. So when the parser goes through the document, will it only activate things that are attached to window.onload() when in the <head>? I've always thought JS should go in the <head> and that whenever I find stuff in the <body> they're doing it wrong, but that's probably one of those things I need to get used to.

  4. #4
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No.
    Only when you are using DOM you have to make sure the document is loaded.
    The window.onload event fires after the whole document is loaded.

    In your case, if you put in the header
    var x = document.getElementById('question');

    The line gets executed right away but document.getElementById('question') doesn't exists yet, it's null.

    This will work because this assignment
    var x = document.getElementById('question');
    is done after the document is loaded (you click on a link in the document):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
      <title>Hello!</title>
    <script type="text/javascript">
    alert('test');
    
    function test(){
    alert("click the link then hover on Question");
    
       var x = document.getElementById('question');
       x.onmouseover = function() {document.getElementById('answer').style.display='block'}
       x.onmouseout = function() {document.getElementById('answer').style.display='none'}
    }
    </script>
    </head>
    
    <body>
    <a id="question" href="#">Question</a>
    <span id="answer" style="display:none;">The answer is 42</span>
    
    <br /><br /><a href="#" onclick="test()">click me</a>
    </body>
    </html>

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Great explanation, thanks a lot.


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
  •