Javascript code to change class value of an element that is dynamically generated

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 th开发者_JAVA技巧e className to based on dynamic values? I've even tried to use the String function with pick-String(pick);-but that doesn't work.

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.

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

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

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.

    function selectPlayer(playerID, pick)
             {
                var xhr;
                xhr = new XMLHttpRequest();         
                xhr.onreadystatechange  = function()
                    {
                      if (xhr.readyState==4 && 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+"&pick="+pick,true);
               xhr.send();
               var mytd = "box" + pick;
               document.getElementById(mytd).parentNode.className = myPos + "box";
             }

I hope this provides enough info.

document.getElementById(mytd).parentNode.className = pick + "box";

add your code at the bottom, as you may be trying to access dom which is not yet created

or

whats seems to is , either 'mytd' or 'pick' are not variables they are just strings and you have added quotes over them. If they are variables please provide some more info abt ur question.

Are you trying to apply two classes to your element or just one? Let's say that the value for pick is "foo". Do you want your element to be <tr class="foobox"> or <tr class="foo box">? If you want the latter, you just need to add a space. Ie, pick + " box". Otherwise, it's a mystery!

I must've been very tired but after looking at the code I had posted and playing around with it, I first figured out that I didn't have a variable "mytext" defined (though I did at one point). After I got that, I started doing a bunch of document.writes to figure out which variables were populated. Here is the final code:

function selectPlayer(playerID, pick)
             {
                var xhr;
                xhr = new XMLHttpRequest();         
                xhr.onreadystatechange  = function()
                    {
                      if (xhr.readyState==4 && xhr.status==200)
                         {

                                document.getElementById("box" + pick).innerHTML=xhr.responseText;
                                var mytext = xhr.responseText;
                                var myPos = String(mytext.substring(mytext.indexOf(';') + 1, mytext.length));
                                var mytd = "box" + pick;
                                document.getElementById(mytd).parentNode.className = myPos + "box";
                         }  
                    }
               xhr.open("GET","SelectPlayer.php?q="+playerID+"&pick="+pick,true);
               xhr.send();