SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Load document.body objects to an array?

    Hi

    I have a script that loads the objects from a document into an array, or at least it's supposed to.

    If you look at this code...

    Code:
    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
     <title>Document</title>
     
     <style type="text/css">
      #layer_1
      {
       position: relative;
       width: 200px;
       height: 200px;
       background-color: #ffffcc;
       border: 1px solid #000000;
       padding: 5px;
      }
     
      #layer_2, #layer_3, #layer_4
      {
       display: none;
      }
     </style>
     
     <script type="text/javascript">
     <!--
     
      var my_object;
     
      function my_object()
      {
       this.document_layers = new Array();
     
       for (var i = 0; i < document.body.childNodes.length; i++)
       {
        if (document.body.childNodes(i).id && document.body.childNodes(i).id != '')
        {
         object_id = document.body.childNodes(i).id;
     
         this.document_layers[object_id] = document.getElementById(object_id);
        }
       }
     
       this.get_length = function ()
       {
        alert(this.document_layers.length);
       }
     
       this.get_width = function (layer_id)
       {
        alert(this.document_layers[layer_id].innerHTML);
       }
      }
     
      function init()
      {
       my_object = new my_object();
      }
     //-->
     </script>
    </head>
    <body onload="init()">
     <div id="layer_1">Layer 1 Content</div>
     <div id="layer_2">Layer 2 Content</div>
     <div id="layer_3">Layer 3 Content</div>
     <div id="layer_4">Layer 4 Content</div>
     <a href="javascript:my_object.get_length()">Layer Count</a><br />
     <a href="javascript:my_object.get_width('layer_3')">Get Layer Content</a>
    </body>
    </html>
    You can see that the objects in the page are loaded in to an array, but the length of that array is zero (0).

    Does anyone know why?

    Thanks in advance!

  2. #2
    Non-Member
    Join Date
    Aug 2006
    Location
    Kansas City
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey grahower,

    I think I know what the problem is. I've done some research and, from my findings, you have to use numerical numbers for indexing.

    For Example:

    if (document.body.childNodes(i).id && document.body.childNodes(i).id != '')
    {
    object_id = document.body.childNodes(i).id;

    this.document_layers[i] = document.getElementById(object_id);
    }

    use the for{} increment as an index for your array. I tested it and it worked for me.
    Hope it helps.

  3. #3
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to use an associative array, stick with an object

    Example:
    Code javascript:
     
    var numericarray = [];
    numericarray.push (1,2,3,4,5);
    /*
     * numericarray now looks like this:
     *  numericarray[0] = 1
     *  numericarray[1] = 2
     *  numericarray[2] = 3
     *  numericarray[3] = 4
     *  numericarray[4] = 5
     */
     
    var associative = {};
    associative.one = 1;
    associative.two = 2;
    // ....
     
    /*
     * You can now access the values inside the object as if it were an associative array:
     * associative['one'] = 1
     * associative['two'] = 2
     */

  4. #4
    Non-Member
    Join Date
    Aug 2006
    Location
    Kansas City
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even Better. Learn something new everyday.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies guys.

    Ize, you're right I am building an associative array, and the way you've done it is fine except for one thing. The length property is still undefined.

    Code JavaScript:
    var associative = {};
    associative.one = 1;
    associative.two = 2;
     
    alert(associative.length); // Returns "undefined"
    The thing is though I was thinking I required that property to do a conventional for loop. Of course there's always an alternative...

    Code JavaScript:
    for (var assoc_index in associative)
    {
    //...
    }

    Anyway, thanks again for the replies, much appreciated...

    Case closed!


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
  •