title: Modifying XML element using Javascript (in XSLT stylesheet)
body: <p>Using XML markup, I have marked certain features in a piece of poetry (Dante's Divine Comedy). When the reader reads the poem, I want to be able to provide him/her with buttons to show or hide (via a predetermined format change) whichever features she/he wants to. </p>
  
  <p>So, I'm trying to write a function <strong>in my XSLT stylesheet</strong> that finds all the instances of whichever XML element and modifies the formatting of the contents.</p>
  
  <p>I've done a lot of reading/research and I think I understand that I need a loop that finds all the instances and modifies them, as so:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
              function displayal() {
                  var elems = document.getElementsByTagName('al');
                  for(var i = 0; i &amp;lt; elems.length; i++) {
                      elems[i].style.color = 'blue';
                  }
              }                                               
   &lt;/script&gt;   
  </code></pre>
  
  <p>FYI, 'al' is the name of the tag I have for alliteration. In theory, the above turns all text found in the 'al' tag blue. </p>
  
  <p>Although the above may be incorrect (and correction certainly appreciated), I believe I have a more basic problem: I simply don't know how to tell the function I'm putting in my XSLT stylesheet to look in the XML document! The only examples I've been able to find that I can make sense of are ones where the element being modified is in the same html document.</p>
  
  <p>If it helps, here is part of my xml file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;?xml-stylesheet type="text/xsl" href="../para3.xsl"?&gt;
  
  &lt;canto id="3"&gt;
      &lt;title&gt; Paradiso 3 &lt;/title&gt;
      &lt;ter id="1"&gt;
          &lt;l1&gt;Quel sol che pria d'amor mi scaldò 'l petto,&lt;/l1&gt;
          &lt;l2&gt;di bella verità m'avea scoverto,&lt;/l2&gt;
          &lt;l3&gt;&lt;rp&gt;provando e riprovando&lt;/rp&gt;, il dolce aspetto;&lt;/l3&gt;
      &lt;/ter&gt;
      &lt;ter id="2"&gt;
          &lt;l1&gt;e io, per &lt;al&gt;confessar corretto e certo&lt;/al&gt;&lt;/l1&gt;
          &lt;l2&gt;me stesso, tanto quanto si convenne&lt;/l2&gt;
          &lt;l3&gt;leva' il capo a proferer più erto;&lt;/l3&gt;
      &lt;/ter&gt;
      &lt;ter id="3"&gt;   
          &lt;l1&gt;ma visïone apparve che ritenne&lt;/l1&gt;
          &lt;l2&gt;a sé me tanto stretto, per vedersi,&lt;/l2&gt;
          &lt;l3&gt;che di mia confession non mi sovvenne.&lt;/l3&gt;
      &lt;/ter&gt;
      [....]
      &lt;cog&gt; ... &lt;/cog&gt;
  </code></pre>
  
  <p></p>
  
  <p>and here is the gist of the xsl file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
      &lt;xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
          xmlns:xs="http://www.w3.org/2001/XMLSchema"
          exclude-result-prefixes="xs"
          version="2.0"&gt;
  &lt;xsl:template match="/"&gt;
  &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;&lt;xsl:value-of select="canto/title"/&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;script type="text/javascript"&gt;
           function displayal()
              var elems = document.getElementsByTagName('al');
              for(var i = 0; i &amp;lt; elems.length; i++) {
              elems[i].style.color = 'blue';
           }                                               
         &lt;/script&gt;   
         &lt;div id="container" style="width:800px;background-color:#FFD700"&gt;
         &lt;div id="header" style="background-color:#FFA500;height:100px;"&gt;
         &lt;h1 style="margin-bottom:10;"&gt;Code and Poetry&lt;/h1&gt;&lt;/div&gt;
  
         &lt;div id="menu" style="width:200px;float:left;"&gt;
         &lt;p&gt;Display Options&lt;/p&gt;
           &lt;button onclick="displayil()"&gt;Show Alliteration&lt;/button&gt;
           &lt;button onclick="undisplayil()"&gt;Hide Alliteration&lt;/button&gt;
         &lt;/div&gt;
         &lt;div id="content" style="background-color:#EEEEEE;width:600px;float:left;"&gt;
             &lt;h2&gt;&lt;i&gt;&lt;xsl:value-of select="canto/title"/&gt;&lt;/i&gt;&lt;/h2&gt;
             &lt;xsl:apply-templates select="canto/ter"/&gt;
             &lt;xsl:apply-templates select="canto/cog"/&gt;                       
         &lt;/div&gt;
  </code></pre>
  
  <p>If you have made it this far, bravo. And thanks! </p>