title: Why does document.getElementById('files') return null?
body: <p>The code below simply didn't work.  </p>
  
  <pre><code>document.getElementById('files').addEventListener('change', handleFileSelect, false);
  </code></pre>
  
  <p>reported by firebug that this getElementById is null but I added a text and it is working.....</p>
  
  <p>it seems the codes are correct...</p>
  
  <p>updates :this is the html page  </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
     document.getElementById('files').addEventListener('change', handleFileSelect,   false);
     document.getElementById('username');
     function handleFileSelect(evt) {
     alert('i am called');
     var files = evt.target.files; // FileList object
  
   // files is a FileList of File objects. List some properties.
   var output = [];
   for (var i = 0, f; f = files[i]; i++) {
    output.push('&lt;li&gt;&lt;strong&gt;', escape(f.name), '&lt;/strong&gt; (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                '&lt;/li&gt;');}
    document.getElementById('list').innerHTML = '&lt;ul&gt;' + output.join('') + '&lt;/ul&gt;';}
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form&gt;
  &lt;input type="text" id="username" /&gt;
  &lt;input type="file" id="files"  /&gt;
  &lt;div id="list"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>