Javascript code to change class value of an element that is dynamically generated
<p>I'm having trouble getting a page element to update the class name using the following code.  The pick variable contains data that I've verified.  When I try to combine the two it doesn't update.  However, when I type just straight text the className gets updated.  Is there anyway to get the className to based on dynamic values?  I've even tried to use the String function with pick-String(pick);-but that doesn't work.</p>

<p>The HTML is below.  Think of it as a large table (10 x 15 cells) and each cell represents a pick in a fantasy football draft.  I want to allow users to click on a cell, have it create an input box within that cell, have the user type in a couple letters of the player's name and have an auto-suggest box provide players that match the string.  Once the user clicks on an autosuggest option, the cell populates with the player's name and the color of the cell changes to represent the position that the player performs. I've done everything except the last part. That's where I'm trying to update the cell's class. </p>

<p>(Note- I made a goof on the original code because it should've read myPos + "box" instead of pick + "box" when setting the className.)</p>

<pre><code>   &lt;Form&gt;  
      &lt;Table&gt;  
           &lt;TBody&gt;   
            &lt;TR&gt;...Headings for Table&lt;/TR&gt;
              &lt;TR&gt;  
                   &lt;TD&gt;Row #&lt;/TD&gt;  
               &lt;TD id=cell1 class='QBbox'&gt;&lt;DIV id='box1'&gt;Brees, Drew&lt;/DIV&gt;&lt;/TD&gt;  
               &lt;TD id=cell2 class='box'&gt;&lt;DIV id='box2'&gt;Player 2&lt;/DIV&gt;&lt;/TD&gt;  
               etc.....  
            &lt;/TR&gt;  
       &lt;/Table&gt;  
    &lt;/Form&gt;  
</code></pre>

<p>Here is the full function that is being performed. This is triggered when a user clicks on a list of autosuggested players.  The clicked on player will get sent to the database as mentioned above and then will update the web page with the name of the user in the cell and the color of the cell will change based on the position. </p>

<pre><code>    function selectPlayer(playerID, pick)
             {
                var xhr;
                xhr = new XMLHttpRequest();         
                xhr.onreadystatechange  = function()
                    {
                      if (xhr.readyState==4 &amp;&amp; xhr.status==200)
                         {
                                var myPos = String(mytext.substring(mytext.indexOf(';') + 1, mytext.length));
                                document.getElementById("box" + pick).innerHTML=xhr.responseText;
                         }  
                    }
               xhr.open("GET","SelectPlayer.php?q="+playerID+"&amp;pick="+pick,true);
               xhr.send();
               var mytd = "box" + pick;
               document.getElementById(mytd).parentNode.className = myPos + "box";
             }
</code></pre>

<p>I hope this provides enough info.</p>
