SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    curious why this doesn't work

    I have the Visual Quickstart Guide JavaScript & AJAX for the web Sixth Edition and modified the starting script by adding this code snippet into a template and it doesn't work. Here is the code.

    HTML Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!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">
    
    <head>
    
    <style type="text/css">
    <!--
    body {
    	font: 11px Verdana;
    	text-align: center;
    }
    
    #contentwrapper {
    	margin: 0 auto;
    }
    -->
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    window.onLoad = writeMessage;
    	function writeMessage() {
    	document.getElementById("helloMessage").innerHTML = "Sup Planet";
    }
    -->
    </script>
    <title>nothing</title>
    
    </head>
    <body>
    <div id="contentwrapper">
      <div id="header">Logo would go here I suppose</div>
      <div id="wrapper">
      <h1 id="helloMessage"></h1>
      </div>
      <div id="footer">&copy; 2007 Somecompany.com</div>
    </div>
    </body>
    </html>
    Now I'm wondering if it's because I put my <h1> example inside a few div's and they did not. That being said...is it because I am not drilling down in the DOM far enough by simply putting
    HTML Code:
    document.getElementById("helloMessage").innerHTML
    into my code? If this is the case what should I do to rectify this situation?

    I'm sorry if I'm asking a stupid question. I just feel it's strange to put an example in a book that someone can't just place in their page irregardless of the structure within the <body> tag....or am I totally missing it here?
    Last edited by amidude; Mar 2, 2007 at 15:38.

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I asked a stupid question didn't I?

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, your question is not stupid. The title of this thread isn't very good though.

    Your problem is that event names must be all lowercase. JavaScript is case-sensitive. "onLoad" is not the same as "onload".

    Just to warn you, in some situations innerHTML won't work like you expect. It's better to use DOM1+ properties and methods.

    Don't use the language attribute on script elements. It's deprecated. Just use the type attribute.

    Also, because it forces IE6 into quirks mode (a bad thing) I suggest you remove this line:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,169
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)

    buggy script

    I find it hard (but not impossible) to believe that a book would ship with code examples that are buggy at the time it's published. You said you have the book and you modified the code.
    If you re-typed the unmodified the code manually and it isn't working, did you make a typo? If the original works but your modifications break it what and how many changes did you make to it?
    ie, Is this the code as published in the book?
    HTML Code:
    window.onLoad = writeMessage;
    	function writeMessage() {
    	document.getElementById("helloMessage").innerHTML = "Sup Planet";
    }
    Personally, I would "get" the parent node, create a text node, add the text to it, and add the new node to the parent node. But if this example is early on in the book it may be over-simplified and meant to serve as an example rather than best practice.
    If you try
    HTML Code:
    	var target_node = document.getElementById("helloMessage");
            target_node.innerHTML = "Sup Planet";
    does it work?

    EDIT: ah, good spot, I didn't notice the case.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow...thanks. I totally missed that too. Thank you both for your help as both solutions worked.


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
  •