javascript - getElementById 返回空值

标签 javascript jquery html

我正在读取并输出一个文本文件。 Chrome 控制台提示:

捕获类型错误:无法读取未定义的 FinanceDashBoard.html:22 的属性“0”

不确定我做错了什么?

代码如下:

<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>

最佳答案

两个错误。

1) 更改此行:

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

对此:

reader.readAsText(filePath);

因为 filePath 已经是:dbFileElm.files[0];

2) main 标签没有 ID,因此通过 ID main 获取元素将不起作用。 只需将其编辑为:

<main id="main">

关于javascript - getElementById 返回空值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25010306/

相关文章:

html - 全尺寸链接作为缩进嵌套无序列表中的 block ?

html - 如何设置 hr 标签的样式

javascript - 使用 Google Sheet 和 Google 脚本中的搜索进行循环

javascript - 从 PHP 中返回多个值并在 Javascript 中解析的最佳方法

javascript - 如何避免下面的 div 接收事件?

javascript - magento 通过 Controller 获取整个页面而不仅仅是变量值

javascript - 将条形高度缩放至容器尺寸

javascript - 注册表单的 Facebook 像素对话

javascript - 静音切换同时播放多个音频

javascript - 数据表:通过 DOM 数据源中的名称引用列