Javascript getElementById返回空值_Javascript_Jquery_Html

Javascript getElementById返回空值

javascript jquery html

Javascript getElementById返回空值,javascript,jquery,html,Javascript,Jquery,Html,我正准备读取并输出一个文本文件。Chrome控制台抱怨：捕获类型错误：无法读取未定义的FinanceDashBoard的属性“0”。html:22“ 不知道我做错了什么代码如下： <html> <head> <title>Read File (via User Input selection)</title> </head> <body> <main> <

我正准备读取并输出一个文本文件。Chrome控制台抱怨：

捕获类型错误：无法读取未定义的FinanceDashBoard的属性“0”。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>


读取文件（通过用户输入选择）
加载文本数据库文件：
var dbFileElm=document.getElementById（'txtfile'）；
dbFileElm.onchange=函数（）{
var filePath=dbFileElm.files[0]；
var reader=new FileReader（）；
var output=”“；//文本输出的占位符
reader.onload=函数（e）{
输出=e.target.result；
显示内容（输出）；
}
reader.readAsText（filePath.files[0]）；
}   
//忽略下面的代码它还不起作用。
函数显示内容（txt）{
var el=document.getElementById（'main'）；
el.innerHTML=txt；//在DOM中显示输出
}

您没有包含

id=“main”

试试像

<main id="main"> ...

两个错误

1）更改此行：

reader.readAsText(filePath.files[0]);

为此：

reader.readAsText(filePath);

因为文件路径已经是：

dbFileElm.files[0]；

2）
main
标记没有ID，因此按ID
main
获取元素将不起作用。只需将其编辑为：

<main id="main">

这篇文章回答了这个问题

如果你把你的输入值设为null，它对我有效

dbFileElm.onChange =  function() {
    this.value = null;
    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]);
  }

这似乎与他遇到的错误无关。他从不尝试读取

el

的属性

。错误发生在哪一行？或者#2可以使用

getElementsByTagName

文档。getElementsByTagName（“main”）[0]是否是

main

即使是HTML5中的有效标记？

main

在当前的W3C HTML5 LC中也是有效的。但这与此无关；它的有效与否并不影响浏览器的功能。瓦伦丁欢呼-我完全错过了这一点。

dbFileElm.onChange =  function() {
    this.value = null;
    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]);
  }