title: HTML Javascript getElementById for <img> image returns null
body: <p>Oh where oh where has my img tag gone?</p>
  
  <p>I have the following HTML.  I am using an OnClick for the searchTopPanel div to toggle the searchPopDown visbility.  As part of this I want to dynamically change the src of an img - to indicate collapse/expand.  Here is the HTML:</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;&lt;/title&gt;
      &lt;style type="text/css"&gt;
          #searchTopPanel
          {
              background-color: rgb(155,154,211);
          }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
          function toggleSearch() {
              var style = document.getElementById("searchPopDown").style;
              var img = document.getElementById("xxxx");
  
              style.display = (style.display != "none") ? "none" : "block";
              img.src = (img.src != "images/expand.png") ? "images/expand.png" : "images/collapse.png";
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="mainSearch"&gt;
          &lt;div id="searchTopPanel" onclick="toggleSearch()" style="cursor:pointer"&gt;
              &lt;span&gt;Advanced Search&lt;/span&gt;
              &lt;img id="xxxx" src="images/expand.png" alt="" /&gt;
          &lt;/div&gt;
          &lt;div id="searchPopDown" style="display:none"&gt;
              &lt;span&gt;Search Options&lt;/span&gt;
              &lt;div id="searchOptions"&gt;
                  &lt;table&gt;
                  &lt;tr&gt;&lt;td&gt;Summary&lt;/td&gt;&lt;td&gt;
                      &lt;select id="Select1"&gt;
                          &lt;option&gt;Contains&lt;/option&gt;
                          &lt;option&gt;Does not contain&lt;/option&gt;
                          &lt;option&gt;Equal to&lt;/option&gt;
                          &lt;option&gt;Not equal to&lt;/option&gt;
                      &lt;/select&gt;&lt;/td&gt;&lt;td&gt;
                          &lt;input id="Text1" type="text" /&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;/table&gt;                
              &lt;/div&gt;
              &lt;input id="search" type="submit" value="Search" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have named my img xxxx.  I've tried various things to find it.<br>
  I am running this from VS2010 with IE9.  I have the advantage(dis) of being able to debug javascript, and it would appear xxxx is null when I call var img = document.getElementById("xxxx");
  .</p>
  
  <p>Just hope I am being stupid this morning and missed something obvious.</p>
  
  <p>Any thoughts?</p>
  
  <p>Thanks,</p>
  
  <p>Andez</p>