title: CSS rules not applied if filename is taken from user
body: <p>I am trying to HTML/javascript program that takes in a filename, parses the file and displays its contents in a table. The issue I am facing is that the if I take the filename as a user input via HTML forms, my CSS rules are not applied to the table I create via javascript to display the parsed contents. But if I hard code the filename and then call the javascript function then the CSS rules do get applied. Not sure where I am going wrong.</p>
  
  <p>Note : I have gone through other similar question but none of then answer this specific situation.</p>
  
  <p>At the end I have given a sample XML data too. One can assume that XML tag names and structure will not vary for different files.</p>
  
  <p>Below is the html, javascript and css code</p>
  
  <p>HTML file</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="loadxml.js" async&gt;&lt;/script&gt;
      &lt;link type="text/css" rel="stylesheet" href="stylesheet.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="userPrompt"&gt;
          &lt;form&gt;
              &lt;input type="text" id="filename"/&gt;&lt;br&gt;&lt;br&gt;
              &lt;button onclick="callDOMHandler()"&gt;Submit Query&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          function callDOMHandler(){
          //var filename = "xmlFileName.xml";
          var file = document.getElementById("filename").value;
          loadXMLDoc(file);
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>javascript code</p>
  
  <pre><code>function is_all_ws( nod ){
    // Use ECMA-262 Edition 3 String and RegExp features
    return !(/[^\t\n\r ]/.test(nod.textContent));
  }
  
  function is_ignorable( nod ){
     return ( nod.nodeType == 8) || // A comment node
       ( (nod.nodeType == 3) &amp;&amp; is_all_ws(nod) ); // a text node, all ws
  }
  
  function loadXMLDoc(filename){
  if (window.XMLHttpRequest){
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
  }
  else{
      // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET",filename,false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML;
  
  document.write("&lt;table&gt;");
  var x=xmlDoc.getElementsByTagName("Row");
  
  for (i=0;i&lt;x.length;i++){
      if(i==0)
          document.write("&lt;tr class=\"topRow\"&gt;");
      else
          document.write("&lt;tr&gt;");
  
      var totalRows = x[i].childNodes.length;
      for(j=0;j&lt;totalRows;j++){
          if(is_ignorable(x[i].childNodes[j])){
              /*do nothing*/
          }
          else{
              document.write("&lt;td&gt;");
  
              if(j==(totalRows-2)&amp;&amp;(i!=0))
                  document.write("&lt;img id=\"logo\" src=\""+x[i].childNodes[j].childNodes[0].nodeValue+"\"/&gt;");
              else
                  document.write(x[i].childNodes[j].childNodes[0].nodeValue);
                  document.write("&lt;/td&gt;");
          }
      }
      document.write("&lt;/tr&gt;");
      }
      document.write("&lt;/table&gt;");
  }
  </code></pre>
  
  <p>CSS file</p>
  
  <pre><code>table, th, td {border: 1px solid black;}
  th, td {padding: 5px;}
  .topRow{text-align: center; font-weight: bold;}
  #logo{width: 100px; height: 100px;}
  </code></pre>
  
  <p>Sample XML</p>
  
  <pre><code>&lt;Workbook&gt;
  &lt;Worksheet&gt;
      &lt;Table&gt;
          &lt;Row&gt;
              &lt;Data&gt;Symbol&lt;/Data&gt;
              &lt;Data&gt;Name&lt;/Data&gt;
              &lt;Data&gt;HomePage&lt;/Data&gt;
              &lt;Data&gt;Logo&lt;/Data&gt;
          &lt;/Row&gt;
          &lt;Row&gt;
              &lt;Symbol&gt;ABC&lt;/Symbol&gt;
              &lt;Name&gt;AbcBcdDef&lt;/Name&gt;
              &lt;HomePage&gt;http://www.homepage.com/&lt;/HomePage&gt;
              &lt;Logo&gt;http://imageURL.png&lt;/Logo&gt;
          &lt;/Row&gt;
          &lt;Row&gt;
              &lt;Symbol&gt;XYZ&lt;/Symbol&gt;
              &lt;Name&gt;XyxYxzZxy&lt;/Name&gt;
              &lt;HomePage&gt;http://www.homepageURL.com/&lt;/HomePage&gt;
              &lt;Logo&gt;http://image.png&lt;/Logo&gt;
          &lt;/Row&gt;
      &lt;/Table&gt;
  &lt;/Worksheet&gt;
  </code></pre>
  
  <p></p>