title: changing className ie8
body: <p>I am having some trouble using Javascript to change the class of a div element. The method I am currently using (See code below) works in Chrome and Firefox but not IE8 (I haven't tested IE9 but assume it either works already or will once ie8 does).</p>
  
  <p>The curious part is that in ie8 when I am changing the class of an input element, it works. but changing the class of a div does nothing (class isn't changed at all)</p>
  
  <p>JavaScript</p>
  
  <pre><code>function switchTab(tab, button) {
      var divs = document.getElementsByName("tab-content");
      var d;
      for (counter=0; counter&lt;divs.length; counter++) {
        d = divs[counter];
        if (d.id == tab)
          d.className = "members";
        else
          d.className = "members-hidden";
      }
      var buttons = document.getElementsByName("button");
      var bu;
      for (counter=0; counter&lt;buttons.length; counter++) {
        bu = buttons[counter];
        if (bu.id == button)
          bu.className = "tab-active";
        else
          bu.className = "tab";
      }
      return false;
  </code></pre>
  
  <p>}</p>
  
  <p>Relevant HTML Snippets</p>
  
  <pre><code>&lt;div id="nav"&gt;
  &lt;ul class="membernav"&gt;
     &lt;li&gt;&lt;input id="ob" type="button" class="tab-active" name="button" onclick="return switchTab('officers', 'ob')" value="Officers"&gt;&lt;/li&gt;
     &lt;li&gt;&lt;input id="pb" type="button" class="tab" name="button" onclick="return switchTab('partners', 'pb')" value="Partners"&gt;&lt;/li&gt;
     &lt;li&gt;&lt;input id="mb" type="button" class="tab" name="button" onclick="return switchTab('managers', 'mb')" value="Managers"&gt;&lt;/li&gt;
     &lt;li&gt;&lt;input id="ab" type="button" class="tab" name="button" onclick="return switchTab('associates', 'ab')" value="Associates"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and further down in HTML</p>
  
  <pre><code>&lt;div id="tab-contents"&gt;
  &lt;div class="members" name="tab-content" id="officers"&gt;
     &lt;!-- irrelevant content removed to save space --&gt;
  &lt;/div&gt;
  
  &lt;div class="members-hidden" name="tab-content" id="partners"&gt;
    &lt;!-- irrelevant content removed to save space --&gt;
  &lt;/div&gt;
  
  &lt;div class="members-hidden" name="tab-content" id="managers"&gt;
     &lt;!-- irrelevant content removed to save space --&gt;
  &lt;/div&gt;
  
  &lt;div class="members-hidden" name="tab-content" id="associates"&gt;
     &lt;!-- irrelevant content removed to save space --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The classes on the buttons are successfully being switched to/from tab and tab-active.</p>
  
  <p>but the divs aren't being changed from members to/from members-hidden.</p>
  
  <p>Have I made some silly mistake? because I change both the same way, why is one working and the other broken?</p>