React and ToChoose Functions for a Menu for All Browsers

One of the objectives of the code is that, when you do not want to see any drop down or sub menu, you should click the BODY element outside the drop down or sub menu. When you do this, any drop down menu or sub menus on the screen should be removed.

However, when you click a menu item in the drop down or sub menu, you do not want the drop down menu or sub menu to be removed. Whenever you click the menu item, the BODY element indirectly receives a click. This indirect click is supposed to remove the drop down or sub menus.

To prevent this, we have to use the toChoose() function. The toChoose() function is called whenever you click a cell of the drop down menu or sub menu. When you click any of these cells, this function is called before the BODY element receives the indirect click. This function name is the value of the onclick attribute for any of these cells.

The function takes the ID of the cell as an argument. It sets the subMenuJustClicked global variable to true. The function called when the BODY element receives a click, either directly or indirectly, first checks to see if this variable is false. If it is false, it removes the drop down or sub menus; if it is true, it does not remove them. This is the toChoose() function:

var subMenuJustClicked = false; //for removing sub menus

function toChoose(ID)

{

currCellBgColor = document.getElementById(ID).style.backgroundColor; //background color of the current cell

if ((currCellBgColor == "firebrick")||(currCellBgColor == "#b22222")||(currCellBgColor == "rgb(178, 34, 34)"))

subMenuJustClicked = true;

}

The function uses the only global variable, subMenuJustClicked. This is the only global variable in the code. This function has just one main statement, which is an if-statement. The condition of this if-statement is the only code segment that really addresses the particular needs of different browsers. So this is the code segment I have been talking about that really addresses peculiarities of different browsers. Fortunately it is a very short code segment. You can think of it as a one-line code segment.

Before we look at the particular issues addressed, let us see what the function does. The if-state checks to see if the background color of the cell the mouse pointer is on, is firebrick. If it is firebrick, it sets the  subMenuJustClicked global variable to true. The statement before this if-statement in the function retrieves the background color of the cell.