Javascript onclick function doesn't appear to be working
<p>I have a page that has a table of rows and cells. Within each row there is a drop down list. When the user selects an entry in the list box the <code>onchange</code> event fires and I call a function to change the width of the list box. The first time it changes the width but if I click on another row within the table it changes the width BEFORE I have changed the list box entry. </p>

<pre><code>function ctrDropDown(on_off,contract,term, table) {
    rows = document.getElementById("staForm:" + table).getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    cells = document.getElementById("staForm:" + table).getElementsByTagName('tbody')[0].getElementsByTagName('td');
     for ( var i = 0; i &lt; rows.length; i++) {

        rows[i].onclick = function() {

            // need to adjust index to account for table headers
            // It's declared globally since it will be also used by handleServerResponse function
            rowI = this.rowIndex - 2;

            document.getElementById( "staForm:" + table + ":" + rowI + ":col2" ).style.width = "80px";             

        };
    }
  }
</code></pre>
