In this seventh part of a ten-part series on building a menu that works in all browsers, we shall continue with our in-depth analysis of the react() function. This is the longest function in this series. In this part we shall treat the details of the sixth code segment.
Producing Sub Menus for a Common Browser Menu - The Statements of the Sixth Code Segment (Page 3 of 4 )
The main statement for the sixth code segment is an else-if-statement. Its condition tests if subColNo is not “” and if rootArr is not “”. If the two results are true, it means that we have to produce a sub menu from a previous sub menu, so the statements in this else-if-block are executed.
The first statement in the block is a for-loop. Another for-loop is immediately nested in this for-loop. The two for-loops are used to arrive at a match. For each iteration of the outer for-loop, all the iterations of the inner for-loop are carried out. The outer for-loop iterates through the length of the spanArr array. The spanArr array has all the numbers for the SPAN elements that would give us the sub menu. The inner for-loop iterates through the length of the rootArr array. The rootArr has the possible roots, but matching has to occur for the SPAN element appropriate for the sub menu table cell to be identified.
Now, for the SPAN element that has to be displayed in a particular cell, the third and fourth digits from the end of the SPAN number have to be the same as the two digits (first and second) of the root number. This is the matching that has to occur. You can work this out using the method we used to give the numbers to the SPAN IDs; remember that the last two digits are not sent for the spanArr.
Well, in our example we do not have any SPAN number with more than six digits. So I compared the first and second digit of the SPAN numbers with the root numbers. In our example the first and second SPAN numbers are the same as the third and fourth SPAN numbers, counting from the end of the number. I did this for simplicity. In your project you would have to write extra code to obtain the third and fourth numbers, counting from the end.
In our example the first statement after the inner for-loop obtains the first and second SPAN number. The statement obtains them in the form of characters, concatenate them to form a string of two characters and assigns the result to the FTN variable. FTN is a string.
Note that all of the statements in the two for-loops are executed for each iteration of either of the for-loops. The number of iterations of either for-loop depends on the length of the corresponding arrays sent (spanArr for the outer and rootArr for the inner). If the length of spanArr is m and that of rootArr is n, then you have mn iterations; all possible combinations are tested.