SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Core.getElementsByClass

    Hello,

    I have written a javascript function which is stored in a file named core.js and a html document, which is named index.html.

    index.html:
    HTML Code:
    <html>
    <head>
    <title>title</title>
    <script type="text/javascript" src="core.js">
    </script>
    </head>
    <body>
    <ul>
    <li class="dataTable">li1</li>
    <li>li2</li>
    <li class="dataTable">li3</li>
    <li>li2</li>									
    </ul>
    <ul>
    <li class="dataTable">li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>									
    </ul>
    <table>
    <tr>
    <td>td1</td>
    <td class="dataTable">td2</td>
    <td>td3</td>
    <td>td4</td>								
    </tr>
    </table>
    </body>
    </html>
    core.js:
    Code:
    var Core = {};
    Core.getElementsByClass = function(theClass)
    {
      var elementArray = [];
    
      if (document.all)
      {
        elementArray = document.all;
      }
      else
      {
        elementArray = document.getElementsByTagName("*");
      }
      
      var matchedArray = [];
      var pattern = new RegExp("(^| )" + theClass + "( |$)");
    
      for (var i = 0; i < elementArray.length; i++)
      {
        if (pattern.test(elementArray[i].className))
        {
          matchedArray[matchedArray.length] = elementArray[i];
        }
      }
    
      return matchedArray;
    };
    
    var myElementArray = Core.getElementsByClass("dataTable");
    document.write(myElementArray[0]);
    I would like to know, why doesn't this code work:

    Code:
    var myElementArray = Core.getElementsByClass("dataTable");
    document.write(myElementArray[0]);

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You are performing the search before the elements are available on the page.
    Place the script at the end of the body, just before the </body>, and it will run fine.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,800
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    the getElementsByClass needs to run after the page finishes loading

    the document.write needs to run before the page finishes loading
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you a lot. I'm quite new 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
  •