Javascript Menu - Function is called twice

[DaRik]

Greetings,

I'm putting together a menu for a webpage. The structure is an
explorer like style map based approach. The content can be found in
the file structure.js and the menu itself in the file menu.js.

To be able to close or open the maps, I add an onclick attribute to
each submap that calls a function openmap() with the node itself as an
attribute. It works fine for toplevel maps, but when you click to
close a submap, for some reason the method openmap() is called as many
times as necessary to go to the toplevel (2 levels deep -> openmap is
called twice). This makes a click on a submap close that branch
completely up to the toplevel map, which is not the intended
behaviour.

Why is this function called twice? Does an onclick event occur on
several times?

Code is listed below, I know it is a bit difficult to understand at
first, I'm sorry for that.

Thanks in advance,

Rick

----------------------------------

menu.js

/* file: <title>menu.js</title> */
var content = [];
var this_menu;
show_menu();
function show_menu(){
init();
}
function init(){
var format = TREE_NODES.format;
var top = format.top;
var left = format.left;
var width = format.width;
var height = format.height;
var background_color = format.background_color;
var node = document.getElementsByTagName("body").item(0);
var root = document.createElement('div');
root.style.position = "absolute";
root.style.top = top;
root.style.left = left;
root.style.width = width;
root.style.height = height;
root.style.backgroundColor = background_color;
node.appendChild(root);
content = TREE_NODES.sub;
for (var i=0; i < content.length; i++){
var contentNode = add(content);
root.appendChild(contentNode);
}
}
function add( item ){
var html = (item.html)?item.html:0;
var url = (item.url)?item.url:0;
var sub = (item.sub)?item.sub:0;
var itemnode;
itemnode = document.createElement('div');
itemnode.style.position = "relative";
itemnode.style.left = 10;

if (url){
var pic = document.createElement('img');
pic.setAttribute("src", "page.gif");
itemnode.appendChild(pic);

var urlnode = document.createElement('a');
urlnode.setAttribute("target", "main");
itemnode.appendChild(urlnode);
}
if (html){
var textNode = document.createTextNode(html)

if (sub) {
var pic = document.createElement('img');
pic.setAttribute("src", "open.gif");
itemnode.appendChild(pic);
}
if (urlnode) {
urlnode.appendChild(textNode);
}
else {

var mapnode = document.createElement('a');
itemnode.appendChild(mapnode);
itemnode.onclick=function() { openMap(itemnode) }
mapnode.appendChild(textNode);
}
if (url) urlnode.setAttribute('href',url);

}
if (sub){
for (var j=0; j < sub.length; j++){
var dit = sub[j];
var subNode = add(dit);
itemnode.appendChild(subNode);
}
}
return itemnode;
}



// THIS FUNCTION IS CALLED TOO MANY TIMES. WHY???


function openMap(node){
alert("openMap");

// alert(node.childNodes.item(0).nodeName); // IMG of the map
// alert(node.childNodes.item(1).nodeName); // A of the map

try {
for(i=2 ; i < node.childNodes.length ; i++) {
if (node.childNodes.item(i).style.display == "none" ) {
node.childNodes.item(0).src = "open.gif";
node.childNodes.item(i).style.display="block";
}
else {
node.childNodes.item(0).src = "closed.gif";
node.childNodes.item(i).style.display="none";
}
}
}
catch (ex) {
alert("error: "+ex);
}
}



----------------------------------

structure.js

/*
file: <title>structure.js</title>
This file contains the menustructure to be displayed with node
children.
*/
var TREE_NODES={
format:{
left: 10,
top: 10,
width: 200,
height: 300,
o_image: "open.gif",
c_image: "closed.gif",
p_image: "page.gif",
background_color: "#ffffff",
main_background_color: "#ffffff",
animation:1,
padding:2,
dont_resize_back:1
},
sub:
[ {html: 'x-html',
sub:[
{html:'w3c', url:'http://www.w3.org/TR/xhtml2/'},
{html:'dom', url:'http://www.w3.org/DOM/'},
{html:'submap',
sub:[
{html:'test1', url:'http://www.w3.org/DOM/'},
{html:'test2', url:'http://www.w3.org/DOM/'},
{html:'submap2',
sub:[
{html:'test21', url:'http://www.w3.org/DOM/'}
]}
]}]
},
{html: 'xml',
sub:[
{html:'xml', url:'http://www.w3.org/XML/'},
{html:'xslt',
sub:[
{html:'main page', url:'http://www.w3.org/Style/XSL/'},
{html:'tutorial', url:'http://www.renderx.com/tutorial.html'}
]}]}]}