SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    beginner, Simply Javascript, Q: DOM nodes

    I'm coding in Dreamweaver CS3 on a Mac, and am running latest Firefox

    I am in the DOM chapter of SitePoint's "Simply Javascript", where I'm learning how javascript references elements/nodes from the html (much like CSS)

    PROBLEM: I am failing to receive browser alerts in the following situation


    HTML:

    <h1>SIMPLY JAVASCRIPT</h1>

    <p id="findme">this is a test of js to find things in html</p>

    JS:

    var target = document.getElementById("findme");

    alert(target.nodeName);
    alert(target.innerHTML);


    I'm expecting to get browser alerts saying 'p' and 'this is a test of js...', respectively
    I get nothing, and nothing on refresh

    NOTE: when I leave the .properties off target, i do get an alert that reads 'null'

    Q. is my .js running before the HTML has completely loaded? oorrr am i missing something really basic?

    _______

    FYI

    the script examples stopped displaying alerts effectively a while back...

    eg. no alert showed up for the following:

    //p.33
    Robot.metal = "Titanium";
    Robot.killAllHumans = function()
    {
    alert("Exterminate!");
    };

    Robot.killAllHumans();


    do i need something Robot-ish in my html? thnx so much

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    opens firefox's error console.

    But yes, you're probably executing the javascript before those dom nodes actually exist(browsers parse/process the web page from top to bottom). Easiest fix is place the code right before the closing </body> tag. You can also use the window.onload event, as well as a few other methods.

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Earlier in the book there are snippets of code with random alerts, and they work because they aren't looking for DOM elements. They just run when the page loads.

    You can use the example on pg 69 to see if it's simply not finding the elements:

    Code:
    var target=document.getElementById("findme");
      if (target != null) {      //or if (target) {
        alert(target.nodeName); //should be p in your version
      }
      else {
        alert("No target found");
      }
    But I think they are expecting that if you run any of those examples that you have it loaded in their Core library, which was what screwed me up in that book : )

  4. #4
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks

    i'm using an external .js, not internal... but i'll paste it in, that will at least eliminate one possibility, cuz my firefox error console says my variable's are 'undefined'

    and yeah the samples quit working around the 'unobtrusive scripting for the real world' section, where the core.start 'special library object' is introduced... which i found multiple copies of in the included code archive... buuut i have no idea which one to use or how to use it

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I had a lot of trouble with that as well. You do start out building some of the things that are part of Core, but not all of it before you're supposed to just include it all to do the first real thing, the stripey tables.

    I downloaded the archive and there's the HTML file for the stripey tables, and I think you can just look at that file and see how they're including the Core stuff, because when you open that HTML file, the JS starts working automagically. Put YOUR HTML file that you're doing your examples on in that same folder as the demo HTML files and reference the Core scripts the same way the demo HTML pages do.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by isamguy0 View Post
    the script examples stopped displaying alerts effectively a while back...

    eg. no alert showed up for the following:

    //p.33
    Robot.metal = "Titanium";
    Robot.killAllHumans = function()
    {
    alert("Exterminate!");
    };

    Robot.killAllHumans();


    do i need something Robot-ish in my html? thnx so much
    I think that we need to start with getting this working for you, because later parts of the book build on earlier parts. if you're having trouble getting parts to work, then the later parts of the book that rely on those same techniques aren't going to work at all.

    My book of Simply Javascript shows The above Robot code on page 56.

    You will notice that the code start with:

    Code javascript:
    var Robot = new Object();

    then the text carries on to say "once you've instantiated your new object, you're free to add properties and methods to it" followed by the code you quoted in the original post.

    Get that working first, and only when it works as expected should you move on forward from there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    The above Robot code on page 56.

    You will notice that the code start with:

    Code javascript:
    var Robot = new Object();
    yeah, this clears up the second issue, thnx pmw

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by isamguy0 View Post
    yeah, this clears up the second issue, thnx pmw
    So after that issue, which page of the book are causing further issues?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    basically, the code examples in early Ch3 (navigating the DOM) are illustrating how JS searches HMTL elements by tag, ID, class etc

    trying to test these examples with alert() output, I realize that I can't just paste the code into test-files without a workaround ensuring that the HTML has loaded before the JS runs

    the end of Ch2 'Unobtrusive Scripting' addressed this problem, and provided the Core library (core.js) as a solution, along with the following code

    var Robot =
    {
    init: function()
    {
    Your HTML modifying code;
    }
    };

    Core.start(Robot);


    after downloading core.js and ref'ing it from my HTML
    plugging stuff in there doesn't seem to work

    a workaround I found that does work (for now I suppose):

    function atload()
    {
    var target = document.getElementById("findme");
    alert(target.nodeName);
    alert(target.innerHTML);
    }

    window.onload = atload;

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You won't need he atload event for the book. Further examples from the book build on the Code library, so if getting that working is a must if you are to continue on with the book.

    is the core library loaded before other scripts that use it? Is it being found?
    What happens when you alert just the Core?

    Code html4strict:
    <script type="text/javascript" src="js/core.js"> </script>
    <script type="text/javascript">
    alert(Core);
    </script>

    If all is going well you should see some kind of object being alerted.
    If things are not well you will see it as undefined.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •