Completing the React Function of a Common Browser Menu
In this eighth part of a ten-part series on building a common browser menu, we treat the last code segment of the react() function. This is the last part of the in-depth analysis we are making of the react() function.
Completing the React Function of a Common Browser Menu - Explanation of the Seventh Code Segment (Page 2 of 4 )
Any sub menu is related to the menu item on which the mouse pointer hovered. The relationship is in the IDs of the SPAN elements and the IDs of the cell on which the mouse pointer sat. The aim of this segment is to clean the SPAN elements that are displayed, but are not supposed to be displayed. The segment starts by getting the row and column numbers of the cell on which the mouse pointer is resting. I call this the current cell.
The first statement gets the row number (digit) of the current cell in character form. This is assigned to the cellrowNo variable. The second statement gets the column number (digit) of the current cell in character form. This is assigned to the cellColNo variable. The next statement gets the SPAN number (which includes the last two digits) of the SPAN number displayed in the current cell from the Number Table. The value is assigned to the spanNo variable. To achieve this, the statement uses the cellrowNo and cellColNo variables.
Next you have two for-loops, the inner one nested immediately to the outer one. These two for-loops will iterate through all the cells of our table and clean up any cell displaying a SPAN element from a sub menu that is no longer supposed to be displayed. All the SPAN numbers we talk about in this code segment include the last two digits.
I describe any SPAN number of a SPAN element that is not supposed to be displayed as Other-SPAN-Number. I use the otherSpanNo variable for this. Recall that the Number Table has SPAN numbers for SPAN elements that are displayed. When a new sub menu appears, the SPAN numbers of the previous sub menus are still in the number table and have to be removed immediately, that is before the react() function is through.
As the two for-loops iterates through all the cells of our table, for each cell, the corresponding SPAN number (if it exists) from the Number Table is assigned to the otherSpanNo variable. The first statement in the for-loops does this. From this statement, every SPAN number in the Number Table is assigned to the otherSpanNo variable. This means that the SPAN numbers of SPAN elements that are supposed to be displayed are also assigned in each iteration. We have to make the difference in order to clean up.