Making a Common Browser Menu React

The react() function begins with an if-statement. As I said, the first six code segments out of the seven code segments are in this if-statement. This is the if-test:

//react only if the background color of the table cell is brown

if (document.getElementById(tdID).style.backgroundColor == "brown")

{

}

The if-condition tests to see if the background color of the cell that called the react() function is brown; that is, if the cell has a SPAN element displayed. It uses the ID of tdID, which is the first parameter of the react() function for this.

The First Code Segment: Details

This is the code of the first code segment:

//get the column no. We need it later.

var colNo = tdID.charAt(3);

colNo = parseInt(colNo);

The ID of any table cell begins with "TD" followed by the table row number and the table column number. The first statement extracts the column number, which is at the last index position (3) of the ID string. It assigns the value to the colNo variable. The second line converts the character retrieved into an integer. We need this table column number later.

The Second Code Segment: Details

This segment sets all background colors on the column to brown. The column number retrieved above is used here. This is the segment:

//set all background colors on the column to brown first

for (i=0; i<5; i++)

{

ID = "TD" + i + colNo

document.getElementById(ID).style.backgroundColor = "brown";

}

We have a for-loop here. The segment loops through the cells of the column. For each iteration, it forms the ID of the cell. The index of the iteration is considered to be the row number. The column number is already known from the previous segment. The colNo variable holds it.

The Third Code Segment: Details

When the mouse pointer is on a cell, the react() function is called. This segment is in the react() function. It gives the cell that called the function a background color of firebrick. This is the code segment.

//give the onmouseover bar a firebrick color

document.getElementById(tdID).style.backgroundColor = "firebrick";

It uses the ID sent as the first argument of the react() function.