getElementById返回null值

Question

getElementById返回null值

我想要阅读并输出一个文本文件.Chrome控制台抱怨:

caught TypeError: Cannot read property '0' of undefined FinanceDashBoard.html:22"

不确定我做错了什么？

代码如下:

<html>
    <head>
       <title>Read File (via User Input selection)</title>
    </head>
<body>
    <main>
      <label>Load a text database file: <input type="file" id="txtfile" ></label>
    </main>

  <script type="text/javascript">

  var dbFileElm = document.getElementById('txtfile');

  dbFileElm.onchange =  function() {
    var filePath = dbFileElm.files[0];
    var reader = new FileReader();
    var output = ""; //placeholder for text output
    reader.onload = function (e) {
      output = e.target.result;
      displayContents(output);
      }
    reader.readAsText(filePath.files[0]);
  }   

  // Ignore code below it doesn't work yet.
  function displayContents(txt) {
    var el = document.getElementById('main'); 
    el.innerHTML = txt; //display output in DOM
  }

  </script>
 </body>
</html>

Run Code Online (Sandbox Code Playgroud)