recursive function and object reference

[palaueb]

Hi!

this is my first post on this forum, I have asked on all Javascript Spanish forums but I have got no response to my doubt.

- I'm coding a script ONLY FOR Internet Explorer 6+ (I have my reasons).
- I have a website with a frameset of two frames.
- When both frames are loaded I call a script on the main page.
- That script get the entire HTML structure of the right frame, reading the elements recursively.
- On the left frame I generate a ul-li structure showing the source code of the right frame, with a recursive function.
- At every LI element, I assign a reference to the element on the right frame.
- When I fire-up an onclick event to a LI element, I don't get any referente to the assigned object.

You can see the page here:

http://www.nbsp.es/ajax/buxframes/index2.php

I don't know why, the only element that save the reference well is the BODY (the first element to be saved on the recursive function).

I can see that if I save an object (just {}) the onclick return undefined.

Please, can someone tell me where is the problem of the references.

 

[tsuji]

[1] >At every LI element, I assign a reference to the element on the right frame.
Could you expend what is meant the "reference"?

[2] Besides, the scripts you have have some calls to some unknown functions or objects, say, insideArray(), TAG, TAG.online, xmp etc..., what are they?

 

[palaueb]

Hello Tsuji,

[1]: for reference I reffer to a pointer to an element. For example, a reference could be:

var ref = document.getElementById("main");

I know reference in english is a list of properties, but I mean a reference as a pointer.

[2]: I will recode all that functions and properties, maybe the problem comes from here.

Thanks!!
Marc

 

[Lowet]

Well, you have much code in the script.
I've made a simple script which works.. I saw that your reference didn't work, maybe because you print out the tags with innerHTML instead of using the DOM.
You can try it yourself and change the layout as you want. I used DIVs instead of UL/LIs..

function genTree(a1,a2)  /*  bool genTree(obj ref_object,obj new_object)  */
{
var obj_div = document.createElement('div');  /*  Main DIV  */
a2.appendChild(obj_div);
obj_div.onmouseover = function () {this.className = 'over';};  /*  Hover function  */
obj_div.onmouseout = function () {this.className = '';};  /*  Mouse out function  */
var obj_has_endtag = /<\/[a-z]+>/i.test(a1.outerHTML);  /*  Object has an endtag  */
   if (a1.nodeType == 1)  /*  If an object tag  */
   {
   var obj_start = document.createElement('span');  /*  Start-tag SPAN  */
   obj_div.appendChild(obj_start);
   obj_start.ref = a1;  /*  Set "ref" attribute to reference object  */
   obj_start.onclick = function () {alert(this.ref);};  /*  Set onclick function  */
   obj_start.innerHTML = '&lt;'+a1.tagName.toLowerCase()+'&gt;';  /*  Start-tag label  */
      if (obj_has_endtag || a1.innerHTML != '')  /*  If tag has content or an end-tag  */
      {
         if (a1.childNodes.length > 0)  /*  If childnodes  */
         {
            if (a1.childNodes.length > 1 || a1.firstChild.nodeType != 3) {obj_div.appendChild(document.createElement('br'))};  /*  Add a BR  */
            for (var i=0; i<a1.childNodes.length; i++)  /*  For each childnode  */
            {
            this.gen_tree = new genTree(a1.childNodes(i),obj_div);  /*  Generate childnode  */
            }
         }
      var obj_end = document.createElement('span');  /*  End-tag SPAN  */
      obj_div.appendChild(obj_end);
      obj_end.innerHTML = '&lt;/'+a1.tagName.toLowerCase()+'&gt;';  /*  End-tag label  */
      }
   }
   else if (a1.nodeType == 3)  /*  If a text-node  */
   {
   obj_div.style.display = 'inline';
   obj_div.style.margin = '0';
   var obj_text = document.createElement('span');  /*  Text-node SPAN  */
   obj_div.appendChild(obj_text);
   obj_text.ref = a1.nodeValue;  /*  Set "ref" attribute to reference object text  */
   obj_text.onclick = function () {alert(this.ref);};  /*  Set onclick function  */
   obj_text.innerHTML = a1.nodeValue;  /*  Text-node label  */
   }
}

var gen_tree = new genTree(f2document.body,dbot.body);

and then in your stylesheets:

div {border: 1px solid white; margin: 5px 5px 5px 15px; cursor: hand;}
div.over {border: 1px solid black;}

This will walk though the whole HTML tree and print it out.
I added lot's of comments so you can see what happens..