title: getelementbyid has no method
body: <p>I have a pull down menu, what i would like is that when there is a change with the pull down that a <code>&lt;div&gt;</code> displays that was previously hidden. But I keep getting an error of:</p>
  
  <pre><code>uncaught typerror:object #&lt;HTML Document&gt; has no method 'getElementByID'
  </code></pre>
  
  <p>Here is the code</p>
  
  <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
     &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
     &lt;head&gt;
      &lt;title&gt;landing3&lt;/title&gt;
     &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
  &lt;script type="text/javascript"&gt;
  function showdiv() {
  document.getElementByID("DIV1").style.display = "inline-block";
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"&gt;
  
        &lt;select id="awf_field-28500717" name="custom Country" tabindex="503" onChange="showdiv()"&gt;
          &lt;option class="multiChoice" value="United States"&gt;United States&lt;/option&gt;
          &lt;option class="multiChoice" value="Canada"&gt;Canada&lt;/option&gt;
          &lt;option class="multiChoice" value="United Kingdom"&gt;United Kingdom&lt;/option&gt;
          &lt;option class="multiChoice" value="Australia"&gt;Australia&lt;/option&gt;
          &lt;option selected&gt;Select&lt;/option&gt;
        &lt;/select&gt;
  
      &lt;div id="DIV1" name="DIV1" style="display:none;"&gt;
      Test
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>