Using An Array To Create A Menu

[chibineku]

Hi there.I'm trying to use a javascript array to create a menu so that when each item is clicked on, it triggers the script to load an xml file (with the same name as the word clicked on) and display the CONTENT element from that xml file. Here is what I've cobbled together:

<script type="text/javascript">var x;var menu = new Array();menu[0] = "Welcome";menu[1] = "News";menu[2] = "Literature";menu[3] = "Images";menu[4] = "Film";menu[5] = "Drink";menu[6] = "Funny";menu[7] = "Learn";menu[8] = "About";menu[9] = "This week...";menu[10] = "Past";menu[11] = "Present";menu[12] = "Future";menu[13] = "Contact";menu[14] = "Huh";for (x in menu){document.write("<p id=\"paragraph\">"+menu[x] + "</p>");document.getElementById("paragraph").onclick y=getElementById("paragraph");}xmlDoc.async=false;xmlDoc.load(y.xml);content=getElementsByTagName("CONTENT");document.getElementById('content').innerHTML=txt+"<p class='wrap'>"+content+"</p>";</script>

What I think needs to happen is that when a menu item is clicked on, this creates a variable with the same value as that menu word, and then somehow .xml gets pinned onto that and the script can load the xml file as usual. Any thoughts?

[jeffman]

1. The only reason you'd want to create a menu out of an array is if the menu were dynamic and the array itself were getting updated in real time. Otherwise, it's a waste of resources. Just hard-code the menu.2. It is not, however, a bad idea to assign a click handler to your menu items in a loop. Assuming all your menu items were in a div with id="menu", you could get a reference to the items like this:var items = document.getElementById("menu").getElementsByTagName('p');Now just loop through items and assign your click handler.3. An id is a UNIQUE identifier. If you give all your menu items the same id, then any later references to that id will catch the first item ONLY.4. I can't even imagine what this statement is trying to accomplish, but the syntax breaks when you introduce the y variable.document.getElementById("paragraph").onclick y=getElementById("paragraph");5. Are you actually creating an XMLHttp object somewhere else in the script?6. getElementsByTagName() returns a reference to collection, not an element. To get any content out of the items, you'll need an explicit index, like collection[0], or you'll need to loop through it.7. In any case, that method returns a reference to a thing, not the thing's contents. If it's an HTML element, maybe you want something like collection[0].innerHTML . If it's an XML element, try collection[0].data.When you get this stuff in order, post your revised code and ask your question again. If would be better if you post the entire script, and maybe the relevant HTML.

[chibineku]

1. The only reason you'd want to create a menu out of an array is if the menu were dynamic and the array itself were getting updated in real time. Otherwise, it's a waste of resources. Just hard-code the menu.2. It is not, however, a bad idea to assign a click handler to your menu items in a loop. Assuming all your menu items were in a div with id="menu", you could get a reference to the items like this:var items = document.getElementById("menu").getElementsByTagName('p');Now just loop through items and assign your click handler.3. An id is a UNIQUE identifier. If you give all your menu items the same id, then any later references to that id will catch the first item ONLY.4. I can't even imagine what this statement is trying to accomplish, but the syntax breaks when you introduce the y variable.document.getElementById("paragraph").onclick y=getElementById("paragraph");5. Are you actually creating an XMLHttp object somewhere else in the script?6. getElementsByTagName() returns a reference to collection, not an element. To get any content out of the items, you'll need an explicit index, like collection[0], or you'll need to loop through it.7. In any case, that method returns a reference to a thing, not the thing's contents. If it's an HTML element, maybe you want something like collection[0].innerHTML . If it's an XML element, try collection[0].data.When you get this stuff in order, post your revised code and ask your question again. If would be better if you post the entire script, and maybe the relevant HTML.

Hiya. Thanks for the reply. I have had a few attempts at looping through the menu items, trying to create an onclick event handler, but I'm not having much success. I've only been playing around with javascript for about a week, and anything that isn't exactly the same as a W3School tutorial example tends to be a bit trial and error. I will keep trying and get back to you when I've got it sorted, or if I absolutely can't. Either way, I appreciate the response.