Question

I have an ‘onclick’ event handler for a div and the div has a nested read-only text field whose text font changes from normal to bold when selected inside the onclick handler:

 <div class="itemlistRowContainer" id="topmostDiv_ID" onclick="handleRowClick(this);">
    <input type="text" size="30" maxlength="50" id="itemName_id"
           name="itemName" value="$itemname" readonly="readonly"
           class="itemListReadonlyTextFieldUnselected"></input>
 </div>

Here is the onclick handler:

  function handleRowClick(theElement)
  {
      var childTextElementArrayOfSizeOne = theElement.getElementsByTagName("input");
      var theTextField = childTextElementArrayOfSizeOne[0];

      theTextField.className = "itemListReadonlyTextFieldSelected";
  }

Here’s the itemListReadonlyTextFieldSelected CSS class:

   .itemListReadonlyTextFieldSelected
   {
        font-weight: bold;
        color: RGB(255,0,0);
   }

I have several of these div-with-nested-readonly-text-field on my page.

When the user clicks on one of them, the above onclick handler successfully changes the nested text input’s font to bold and color red. So the selecting part — bold+red text — works fine. But I need to de-select the old selection when the user clicks elsewhere.

So my question is — how can I keep track of the ‘currently selected div+text input’ item — so that when a different div+text input is clicked on, I can change back the previously selected div+text input to black, not-bold text, using this style?

   .itemListReadonlyTextFieldUnelected
   {
        font-weight: normal;
        color: RGB(0,0,0);
   }

I immediately thought "I’ll just save the ‘currently selected’ div and text input DOM elements in my SESSION – ahh nope this is client side javascript." Session variables are my go-to for stuff like this on server-side code.

My current technology requirements are php, javascript and html (jquery = no.)

What’s a good way to keep track of the previously selected div+text input?

A brute-force method would be to traverse the tree of ELEMENTs on the page and find the one div that has a nested text element whose className = "itemListReadonlyTextFieldSelected" but I’d rather smash my big toe with a gott-dang sledgehammer than have someone during a code review slap me upside the head after seeing something like that.

Answer 1

How about assigning it to a variable?

var currentlySelectedTextElement;

function handleRowClick(theElement)
{
    // un-highlight the currently highlighted element
    if (currentlySelectedTextElement){
        currentlySelectedTextElement.className = "";
    }

    var childTextElementArrayOfSizeOne = theElement.getElementsByTagName("input");
    var theTextField = childTextElementArrayOfSizeOne[0];

    theTextField.className = "itemListReadonlyTextFieldSelected";

    // save the reference so you can un-highlight it later
    currentlySelectedTextElement = theTextField;
}