Having trouble filling an option list in javascript

Question

I have a addPlay() that is a button and part of the process is that it will fill a option list but it is not doing that.

Here is the portion that it is called from

var gamelogElem=document.getElementById("gamelog");
var newPlay=xmlDoc.createElement("play"); 
var minIndex=document.getElementById("min").selectedIndex;
var secIndex=document.getElementById("sec").selectedIndex;
var actIndex=document.getElementById("action").selectedIndex;
var playerIndex=document.getElementById("player").selectedIndex;
var minute=document.getElementById("min").options[minIndex].text;
var second=document.getElementById("sec").options[secIndex].text;
var time=minute + ":" + second; 
var playerOpt=document.getElementById("player").options;   
var player=playerOpt[playerIndex].text;
var op = document.getElementById("player")
                 .options[document.getElementById("player").selectedIndex];
var optgroup = op.parentNode;
var team=optgroup.label;
var actionOpt=document.getElementById("action").options;
var action=actionOpt[actIndex].text;            

//  these values above are the ones that should be showing up and are in the play template
newPlay.setAttribute("time", time);
newPlay.setAttribute("player", player);
newPlay.setAttribute("team", team);  // can't define
newPlay.setAttribute("action", action);
xmlDoc.documentElement.appendChild(newPlay);  
gamelogElem = runTransform(xmlDoc,xsltDoc4);

here is the runTransform function

function runTransform(xDoc, xsltDoc) {      
   var xProcessor = new XSLTProcessor();   
   xProcessor.importStylesheet(xsltDoc); 
   var resultDoc = xProcessor.transformToDocument(xDoc);  
   var serializer = new XMLSerializer();
   var resultStr = serializer.serializeToString(resultDoc); 
   return resultStr;
}

Here is the portion that is filling the option in the template "play"

The call of the display is "<select name="actionlist" size="20">...</select>" which you can see below and follow it to where it calls out the values set above.

  <xsl:template match="plays">
     <table class="actions">
        <tr>
            <th>Game Log</th>
        </tr>
        <tr>
            <td>
                <select name="actionlist" size="20">
                    <xsl:apply-templates select="play" />
                </select>
            </td>
        </tr>
    </table>
</xsl:template>

<xsl:template match="play">
    <option>
        [<xsl:value-of select="@time" />] <xsl:value-of select="@player" /> (<xsl:value-of select="@team" />) <xsl:value-of select="@action" />
    </option>
</xsl:template>

Why use XSLT for this at all? You can do this in javascript without it: http://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript — Flynn1179, Feb 21 '14 at 14:26

score 0 · Answer 1 · answered Feb 21 '14 at 18:15

0

change line xmlDoc.documentElement.appendChild(newPlay); to xmlDoc.getElementsByTagName("plays")[0].appendChild(newPlay);

needed to get the newly created elements tag before appending it

answered Feb 21 '14 at 18:15

programmerNOOB

121
3
19

Ah, I see- the `play` element wasn't intended to be a child of the root element. From your question, I assumed `plays` WAS the root element. – Flynn1179 Feb 21 '14 at 21:30

Having trouble filling an option list in javascript

1 Answers1