[Javascript] A loop for this script?

[Paul Novitski]

Roland,

Rather than giving each item an id and referring to it directly in your 
script, you can give an id to their common parent (container) and then 
iterate through the parent's children.  For example,

<div id="nav">
         <table>
         ...
         <table>
         <table>
         ...
         <table>
         <table>
         ...
         <table>
</div>

         var oBox = document.getElementById("nav");
         var aKids = oBox.getElementsByTagName("table");

         for (var iKid = 0; iKid < aKids.length; iKid++)
         {
                 aKids[iKid].onclick = doSomething;
         }

Aside, I have to say that I'd have marked up this page differently, using 
nested unordered lists for menus instead of tables, for example:

<ul id="nav">
         <li><a href="#">Tutorials</a>
                 <ul>
                         <li><a href="/html/default.asp">HTML</a></li>
                         <li><a href="/xhtml/default.asp">XHTML</a></li>
                         <li><a href="/css/default.asp">CSS</a></li>
                         <li><a href="/xml/default.asp">XML</a></li>
                         <li><a href="/xsl/default.asp">XSL</a></li>
                 </ul>
         </li>
         <li><a href="#">Scripting</a>
                 <ul>
                 ...
                 </ul>
         </li>
         ...
</ul>

Then, in javascript, I'd begin with the firstChild of "nav", set behavior 
for that item and set the style of its child menu, move to the nextSibling, 
repeat, until (!nextSibling) = until nextSibling doesn't exist.

Here's some quickie untested code:

         var oBox = document.getElementById("nav");
         var oKid = oBox.firstChild;

         while (oKid)
         {
                 oKid.onmouseover = doSomething;
                 oKid.firstChild.style.visibility = "hidden";
                 oKid = oKid.nextSibling;
         }

Paul



At 01:03 PM 7/1/2005, Roland Dong wrote:
>Thanks again, Paul.
>
>Here is the url of the file:
>
>http://www.wiu.edu/users/murbhd/test.html
>
>All I want is to use a for loop in the javascript instead of hard coding.  I
>tried using for loop (see below) without success.  I appreciate your help.
>
>Thanks
>
>
>-----Original Message-----
>From: javascript-bounces at LaTech.edu [mailto:javascript-bounces at LaTech.edu]
>On Behalf Of Paul Novitski
>Sent: Friday, July 01, 2005 3:00 PM
>To: javascript at LaTech.edu
>Subject: RE: [Javascript] A loop for this script?
>
>Roland,
>
>Sorry, I'm in a work crunch today and can't focus on this right now.
>
>The best way to post a problem to the listserve is to upload a web page to
>a server and give people the link, rather than throwing them lots of code
>in an email.  Include on the html page an explanation for what you want to
>accomplish and the precise problem(s) you're encountering.  Saying that
>something "doesn't work" isn't, alas, very helpful.  Doesn't work how?  Are
>you getting error messages, and if so which ones? etc.  What behavior are
>you expecting, precisely, and what behavior are you experiening, precisely?
>
>Sorry I'm not more helpful, but if I had an active html example to look at
>it would be more feasible to respond meaningfully.
>
>Warm regards,
>Paul
>
>
>At 11:44 AM 7/1/2005, you wrote:
> >Paul:
> >
> >Thanks for your reply. Maybe I did not address the problem clearly.
> >Basically, this is what I want. I want user a for loop for the following
> >code to avoid hard coding:
> >
> >=====================================
> >var TIMER;
> >startList = function() {
> >         navBar = document.getElementById("nav").rows[0].cells;
> >         navBar[0].onmouseover=function() {
> >
> >document.getElementById("tutorials").style.visibility="visible"
> >         }
> >
> >         navBar[0].onmouseout=function() {
> >
> >TIMER=setTimeout('document.getElementById("tutorials").style.visibility="hi
>d
> >den"', 500);
> >         }
> >
> >         document.getElementById("tutorials").onmouseover=function(){
> >                     clearTimeout(TIMER);
> >
> >document.getElementById("tutorials").style.visibility="visible";
> >         }
> >
> >         document.getElementById("tutorials").onmouseout=function(){
> >
> >TIMER=setTimeout('document.getElementById("tutorials").style.visibility="hi
>d
> >den"', 500);
> >         }
> >
> >         navBar[1].onmouseover=function() {
> >
> >document.getElementById("scriptings").style.visibility="visible"
> >         }
> >         navBar[1].onmouseout=function() {
> >
> >TIMER=setTimeout('document.getElementById("scriptings").style.visibility="h
>i
> >dden"', 500);
> >         }
> >
> >         document.getElementById("scriptings").onmouseover=function(){
> >                         clearTimeout(TIMER);
> >
> >document.getElementById("scriptings").style.visibility="visible";
> >         }
> >
> >         document.getElementById("scriptings").onmouseout=function(){
> >
> >TIMER=setTimeout('document.getElementById("scriptings").style.visibility="h
>i
> >dden"', 500);
> >         }
> >
> >         navBar[2].onmouseover=function() {
> >
> >document.getElementById("validation").style.visibility="visible"
> >         }
> >
> >         navBar[2].onmouseout=function() {
> >
> >TIMER=setTimeout('document.getElementById("validation").style.visibility="h
>i
> >dden"', 500);
> >         }
> >
> >         document.getElementById("validation").onmouseover=function(){
> >                     clearTimeout(TIMER);
> >
> >document.getElementById("validation").style.visibility="visible";
> >         }
> >
> >         document.getElementById("validation").onmouseout=function(){
> >
> >TIMER=setTimeout('document.getElementById("validation").style.visibility="h
>i
> >dden"', 500);
> >         }
> >
> >}
> >
> >window.onload=startList;
> >=====================================
> >
> >
> >
> >This is what I have tried:
> >======================================
> >         var catNames = new Array("tutorials", "scripting", "validation");
> >         navBar = document.getElementById("nav").rows[0].cells;
> >
> >     for (x in navBar){
> >
> >                 navBar[x].onmouseover=function(){
> >
> >document.getElementById(catNames[this.cellIndex]).style.visibility="visible
>"
> >;
> >
> >                 }
> >
> >                 navBar[x].onmouseout=function(){
> >                     TIMER=setTimeout('document.getElementById("'
> >+catNames[this.cellIndex]+ '").style.visibility="hidden"', 500);
> >
> >                 }
> >
> >             document.getElementById(catNames[x]).onmouseover=function(){
> >                     clearTimeout(TIMER);
> >                         document.getElementById().visibility="visible";
> >
> >                 }
> >
> >
>document.getElementById(catNames[x]).onmouseout=function(){
> >
> >TIMER=setTimeout('document.getElementById(catNames[x]).style.visibility="hi
>d
> >den"', 500);
> >                 }
> >         }
> >
> >
> >This portion of the code works:
> >=========================================================================
> >document.getElementById(catNames[this.cellIndex]).style.visibility="visible
>"
> >;
> >
> >                 }
> >
> >                 navBar[x].onmouseout=function(){
> >                     TIMER=setTimeout('document.getElementById("'
> >+catNames[this.cellIndex]+ '").style.visibility="hidden"', 500);
> >===========================================================================
> >
> >
> >
> >
> >This portion of the code DOES not work!!!!!! No matter what I do I can not
> >pass any value to document.getElementById().
> >=========================================================================
> >     document.getElementById(catNames[x]).onmouseover=function(){
> >                     clearTimeout(TIMER);
> >
> >document.getElementById(catNames[x]).).visibility="visible";
> >
> >                 }
> >
> >
>document.getElementById(catNames[x]).onmouseout=function(){
> >
> >TIMER=setTimeout('document.getElementById(catNames[x]).style.visibility="hi
>d
> >den"', 500);
> >                 }
> >         }
> >=========================================================================
> >
> >
> >Any idea?
> >
> >
> >
> >
> >
> >
> >
> >-----Original Message-----
> >From: javascript-bounces at LaTech.edu [mailto:javascript-bounces at LaTech.edu]
> >On Behalf Of Paul Novitski
> >Sent: Friday, July 01, 2005 12:43 PM
> >To: JavaScript List
> >Subject: RE: [Javascript] A loop for this script?
> >
> >At 08:34 AM 7/1/2005, Roland Dong wrote:
> > >Sorry, my mistake, I should say I tried document.getElementById("'
> > >+ids[x]+'") and document.getElementById(ids[x]) and none of them works.
>Why
> > >can't I get the value from the array?
> >
> >Roland,
> >
> >Your use of quotation marks is very strange.  Anything inside quotation
> >marks is processed as a string and not evaluated [unless you use the eval()
> >function which I recommend you approach very warily].  I recommend you
> >re-read javacript syntax documentation such as:
> >http://www.croczilla.com/~alex/reference/javascript_guide/
> >
> >Are you trying to force javascript to interpret ids[x] as a string?  If so,
> >perhaps try this:
> >
> >          document.getElementById("" + ids[x] + "")
> >
> >You can probably get to the root of the problem simply by displaying the
> >current value of ids[x] on each iteration.  Insert this into your loop:
> >
> >          alert(x + ": ids[x] = " + ids[x]);
> >
> >Without studying your code, my guess is that either ids[x] is not a string
> >but rather an object or a numeric, or that the subscript x takes the array
> >past the last member that has a valid value for your purposes.
> >
> >Good luck,
> >Paul
> >
> >
> >_______________________________________________
> >Javascript mailing list
> >Javascript at LaTech.edu
> >https://lists.LaTech.edu/mailman/listinfo/javascript
> >
> >_______________________________________________
> >Javascript mailing list
> >Javascript at LaTech.edu
> >https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript