title: javascript setAttribute 'className' works onLoad, but not onClick
body: <p>Why does the following work for onLoad, and not onClick, and what would be the solution?
  Thanks in advance...</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
      &lt;LINK href=CSS/showdetails.css type=text/css rel=stylesheet /&gt;
  &lt;/head&gt;
  &lt;body OnLoad="javascript:showdetails()"&gt;
  
  &lt;script language=JavaScript src=js/showdetails.js type=text/javascript&gt;&lt;/script&gt;
  
  &lt;div id="divResults" style="OVERFLOW: auto; HEIGHT: 480px;"&gt;
  &lt;span id="ShowResults" style="VISIBILITY: hidden"&gt;Display Results&lt;/span&gt;
  &lt;p&gt;&lt;input id="Button1" type="button" value="button" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var btn = document.getElementById('Button1');
  btn.onclick = function() {showdetails();};
  
  function showdetails() {
      var xc = document.getElementById('ShowResults');
  
      var top_ul = document.createElement('ul');
      top_ul.setAttribute('className','detclass');
  
  
      var li1 = document.createElement('li');
      li1.appendChild(document.createTextNode('craig'));
  
  
      var ul2 = document.createElement('ul');
      var li2 = document.createElement('li');
      li2.appendChild(document.createTextNode('Mike'));
  
      ul2.appendChild(li2);
  
  
      li1.appendChild(ul2);
      top_ul.appendChild(li1);
  
      xc.appendChild(top_ul);
  
      var vis = "visible";
      xc.style.visibility = vis;
      }
  &lt;/script&gt;                 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>