SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getElementId question

    i recently learned to work with getElementById(at least i thought so..)
    and now i am trying to do some thing very simple and it isnt working.
    Code:
    <script language="javaScript">
    <!--
    document.getElementById("test").innerHTML="ttt";
    -->
    </script>
    i have a div with id="test"

    why doesnt this work?

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    took a look into this... writing the code like this:

    Code:
    <script language="javaScript">
    <!--
    alert(document.getElementById("test").innerHTML);
    document.getElementById("test").innerHTML = "ttt";
    -->
    </script>
    
    <div id="test"></div>
    does not work because the javascript executes before the div is even written so it doesnt know how to set the div

    if you write it like this

    Code:
    <div id="test"></div>
    
    <script language="javaScript">
    <!--
    alert(document.getElementById("test").innerHTML);
    document.getElementById("test").innerHTML = "ttt";
    -->
    </script>
    i thought it would work because javascript executes after but still no success

    then out of curiousity i put something in the div (a &nbsp so its not blank and it works, so make sure you have at least a space in the div when it loads and then make sure the <script></script> code comes after the div in the HTML code

    Working Code:
    Code:
    <div id="test">&nbsp;</div>
    
    <script language="javaScript">
    <!--
    alert(document.getElementById("test").innerHTML);
    document.getElementById("test").innerHTML = "ttt";
    -->
    </script>


    That seemed to work for me... hope that helps
    Last edited by domainsatretail; Dec 5, 2006 at 09:50. Reason: added text

  3. #3
    SitePoint Zealot logitron's Avatar
    Join Date
    Feb 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The 'innerHTML' property is a bad way of getting the information. Matter of fact, I believe that it is depricated. Instead, you need to access the information using DOM. This example is the best way to accomplish what you want to do:

    Code:
    <div id='test'></div>
    
    <script type='text/javascript'>
    <!--
        //Get the div tag and store it in a variable
        testDiv = document.getElementById('test')
        
        //Create a text node with your information
        textNode = document.createTextNode('Hello, World!')
    
        //Append the text node to your div tag (stored in testDiv var)
        testDiv.appendChild(textNode)
    //-->
    </script>
    This is the proper way of putting "Hello, World!" in the div tag. I believe IE will give you a fit if you used the innerHTML.
    Patrick Smith
    PHP Programmer

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    domainsatretail and logitron are correct, but another way to ensure script runs after the document has fully loaded is to use the 'window.load' event:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <meta name='author' content='Author'>
    <meta name='description' content='Description'>
    <meta name='keywords' content='Keywords'>
    <link rel='stylesheet' type='text/css' href=''>
    <style type='text/css'>
    </style>
    <script type='text/javascript' src=''></script>
    <script type='text/javascript'>
    window.onload = function()
    {
      var ele = document.getElementById('test');
      ele.innerHTML = 'Test written with innerHTML. ';
      var txt = document.createTextNode('Test written with DOM methods.');
      ele.appendChild(txt);
    }
    </script>
    </head>
    <body>
    <div id='test'></div>
    </body>
    </html>

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logitron View Post
    The 'innerHTML' property is a bad way of getting the information. Matter of fact, I believe that it is depricated. Instead, you need to access the information using DOM. This example is the best way to accomplish what you want to do.........This is the proper way of putting "Hello, World!" in the div tag. I believe IE will give you a fit if you used the innerHTML.
    innerHTML was never part of a standard to begin with so it can't be depricated. And IE won't throw a fit if you use innerHTML, because innerHTML actully was created by Microsoft and i doubt IE will lose support.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



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
  •