SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member leeschen's Avatar
    Join Date
    May 2006
    Location
    Cave Junction, Oregon, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem with document.getElementById

    The code snippet below was adapted from the JavaScript Anthology. It is being processed through the addLoadListener function, so the page should certainly be loaded. Yet the alerts show the text in the comments following them in the listing.

    I must be missing something very obvious here. I don't see how, when the id "showdate" exists and the document exists, why do I not get the reference to the element returned from the getElementById function?

    I will appreciate any and all responses. Thanks!

    Lee

    Code:
    function replaceElement( oldId, strData )
    {
    
    //Get the old element and its attributes
    	alert(document); //alert=object:HTML document
    	alert(oldId + ":" + strData); //alert=showdate:Sep 11, 2006
    	var oldElement = document.getElementById(oldId);
      alert(typeof oldElement + ":" + oldElement); //alert=object:null [WHY?]
    
      if ( oldElement )
      {
    	  var oldType = oldElement.getAttribute("type");
    		var oldClass = oldElement.getAttribute("class");
      }
      else
      {
      	return false;
      }
    return true;
    };
    /

    Lee Eschen
    Ashgrove Visual Arts
    ~~~
    "Vision without technique is blind." --George Lepp

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hate to ask the obvious question - but you have an element with the id of "showdate", right?

    What type of element is it?

  3. #3
    SitePoint Member leeschen's Avatar
    Join Date
    May 2006
    Location
    Cave Junction, Oregon, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I said in my original post, yes, an element with the id of "showdate" does exist. It happens to be an h4, but why should this matter. Insofar as I know, the function should return a reference to the element regardless of type. Am I wrong?

    I'm a long time programmer but relatively new to JavaScript.

    Lee Eschen
    Ashgrove Visual Arts
    ~~~
    "Vision without technique is blind." --George Lepp

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It might help if you could post the piece of html code where you are calling this javascript function. Often we make silly mistakes that is hard to notice.
    With Regards
    Pman
    http://www.pmansLab.com

  5. #5
    SitePoint Member leeschen's Avatar
    Join Date
    May 2006
    Location
    Cave Junction, Oregon, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The code involved

    OK, Here is the code involved in calling the functions. As you can see, the function in question is called via addLoadListener() which listens for the load event, which is called directly from the loaded javascript files (last statement in file). This is correct usage according to "The JavaScript Anthology", assuming I am reading it correctly.

    Nothing except addLoadListener() should actually run until the load event triggers, at which time the document should be fully loaded. Or am I missing something?

    Should I perhaps be initiating the process from later in the HTML code?

    Thanks for the help, guys. It is greatly appreciated.

    Lee

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    
      <head>
    
        <title>title</title>
    
    <!--MetaData-->
    
    <!--Load Stylesheets-->
    
    <!--Load JavaScript-->
    
        <script type="text/javascript" src="scripts/handle_events.js"> </script>
        <script type="text/javascript" src="scripts/Style_switcher.js"> </script>
        <script type="text/javascript" src="scripts/display_dates.js"> </script>
    
      </head>
    .....

    Code:
    //handle-events.js
    //-----------------
    
    function addLoadListener(fn)
    {
      if (typeof window.addEventListener != 'undefined')
      {
        window.addEventListener('load', fn, false);//Standards
      }
      else if (typeof document.addEventListener != 'undefined')
      {
        document.addEventListener('load', fn, false);//Opera
      }
      else if (typeof window.attachEvent != 'undefined')
      {
        window.attachEvent('onload', fn);//IE
      }
      else
      {
        var oldfn = window.onload;//Mac IE5
        if (typeof window.onload != 'function')
        {
          window.onload = fn;
        }
        else
        {
          window.onload = function()
          {
            oldfn();
            fn();
          };
        }
      }
    };
    
    
    
    //display-dates.js
    //----------------
    
    //also date formatting functions here
    
    function replaceElement( oldId, strData )
    {
      var oldElement = document.getElementById(oldId);//???
      if ( oldElement )
      {
        var oldType = oldElement.getAttribute("type");
        var oldClass = oldElement.getAttribute("class");
      }
      else
      {
        return false;
      }
      var newElement = document.createElement(oldType);
      var newContent = document.createTextNode(strData);
      newElement.appendChild(newContent);
    
    //Set the attributes of the new element
    
      newElement.setAttribute("id", "");
      newElement.setAttribute("class", "");
      newElement.id = oldId;
      newElement.class = oldClass;
    
    //Replace the old element with the new element
    
      var itsParent = oldElement.parentNode;
      var newChild = itsParent.replaceChild(newElement, oldElement);
    
      return true;
    };
    
    
    function init()
    {
      var today = new Date();
      var strDt = today.getDateString("%month %date, %year");
      replaceElement("showdate",strDt);
    
    };
    
    //end of functions***
    
    //The following line calls the functions through the load event listener above
    
    addLoadListener(init());

    Lee Eschen
    Ashgrove Visual Arts
    ~~~
    "Vision without technique is blind." --George Lepp

  6. #6
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ran this through firefox and the first error I received was on the "getDateString" method you attempted to call from the init() function on the Date object.

    I think that's a c# thing - not javascript.

    Anyway, you're attempting to pass a function reference into the addLoadListener function, but by using the parenthesis after the init function, you're actually passing the results of the init function to addLoadListener. Try removing the parenthesis after the 'init' and debug from there.

    I'm curious to know how it turns out for you.

    HTH,

    Jon

  7. #7
    SitePoint Member leeschen's Avatar
    Join Date
    May 2006
    Location
    Cave Junction, Oregon, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's it, Jon! Thank you! I knew it was going to be a headslapper.

    The getDateString is a js function which I did not include in the code because I was getting the date string itself back ok.

    I am now getting a string error, which is goint to take a bit more headscratching. I'll get back to you.


    Lee

    Lee Eschen
    Ashgrove Visual Arts
    ~~~
    "Vision without technique is blind." --George Lepp

  8. #8
    SitePoint Member leeschen's Avatar
    Join Date
    May 2006
    Location
    Cave Junction, Oregon, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I got the date display stuff working great. Now I'm starting on the style sheet switcher. It's all working except for one little sticking point:

    Code:
    function getEventTarget(event)
    {
      var targetElement = null;
      alert(typeof event.target);                 //"undefined"
      if (typeof event.target != "undefined")
      {
        targetElement = event.target;          //Compliant browsers
      }
      else
      {
        targetElement = event.srcElement;    //IE 6 & 5
      }
      alert(targetElement);                          //"undefined"
      while (targetElement.nodeType == 3 && targetElement.parentNode != null)
      {
        targetElement = targetElement.parentNode;
      }
      return targetElement;
    };
    I'm running on Firefox 1.5 and the variable event is the string "click". The function should return a handle to the element that was clicked on, but the alert shows typeof event.target to be "undefined", so of course, when you try to access it in the while statement, it bombs as targetElement has no properties.

    Any thoughts?

    Lee

    Lee Eschen
    Ashgrove Visual Arts
    ~~~
    "Vision without technique is blind." --George Lepp

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think it'll work the way you are trying. Your "event" is a type of string and a string doesn't have any properties or method named "target". That's why you are not getting anything when you tried "event.target" . I haven't tried it yet, but you can try the following psudo code.

    - give an id to the link which is referring to the css file
    - when the element is clicked, that is supposed to change the css file
    i.e: <element .... onclick = "switchCss()" />
    function switchCss()
    {
    ---- var cssLink = document.getElementById('theLinkId') ;
    ---- cssLink.href = "path to your new css file" ;
    }
    With Regards
    Pman
    http://www.pmansLab.com

  10. #10
    SitePoint Member leeschen's Avatar
    Join Date
    May 2006
    Location
    Cave Junction, Oregon, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Got it working!

    What you said was true if event was a string. event is a handle, or pointer, to the actual event, and once I got that squared away, it started working.

    A big thank you to all who helped me out on this thread. I really appreciate it.


    Lee Eschen

    Lee Eschen
    Ashgrove Visual Arts
    ~~~
    "Vision without technique is blind." --George Lepp


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
  •