来自“HTML5 文件 API 中的 FIleReader.readAsText 如何工作”的 FileReader 错误答案

【问题标题】：FileReader Error from "How FIleReader.readAsText in HTML5 File API works"来自“HTML5 文件 API 中的 FIleReader.readAsText 如何工作”的 FileReader 错误
【发布时间】：2018-01-11 04:40:10
【问题描述】：

根据我的目的调整How FileReader.readAsText in HTML5 File API works? 代码后。它给了我一个错误。

未捕获的类型错误：无法读取 null 的属性“addEventListener”

我改编的 Javascript 代码

var button = document.querySelector('#fileInput + button');
var input = document.getElementById('#fileInput');
var text = null;
input.addEventListener("change", addDoc);
button.addEventListener("click", handleText);

function addDoc(event) {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        text = reader.result;
        button.removeAttribute("disabled");
    };

    reader.onerror = function(err) {
        console.log(err, err.loaded, err.loaded === 0, file);
        button.removeAttribute("diabled");
    };

    reader.readAsText(event.target.files[0]);
    console.log(reader.readAsText(event.target.files[0]));
}

function handleText() {
    addtoPreviousOutput();
    changeOutputParagraph(text);
    button.setAttribute("disabled", "disabled");
}

function changeOutputParagraph(newText) {
    var element = document.getElementById("output");
    element.innerHTML = newText;
}

function addtoPreviousOutput() {
    var previousOutput = document.getElementById("output").innerHTML;
    var previousOutput_sOutput = document.getElementById("previousOutput").innerHTML + "<br />";
    console.log(previousOutput);
    console.log(previousOutput_sOutput);
    document.getElementById("previousOutput").innerHTML = previousOutput_sOutput + previousOutput;
}

我改编的 HTML5 代码

<input type="file" id="fileInput" accept="text/*"/>
<button type="button">Add Document</button>
<p id="output"></p>

我的错误是由什么引起的，我该如何解决？谢谢，DS_Secret。

【问题讨论】：

标签： javascript html file filereader

【解决方案1】：

当代码

var input = document.getElementById('#fileInput');
input.addEventListener("change", addDoc);

由于消息Uncaught TypeError: Cannot read property 'addEventListener' of null 失败，因此document.getElementById('#fileInput') 返回null。

这又意味着在代码运行时没有 ID 为 '#fileInput' 的元素。这是真的，您只有一个类似的带有id="fileInput" 的id 元素，没有前导# 字符。所以设置输入像

var input = document.getElementById('fileInput');

或

var input = document.querySelector('#fileInput');

此外，请确保 JavaScript 代码不会运行得太早。通常，所有依赖于 DOM 的东西都应该只在DOMContentLoaded event 被触发后才被调用，尤其是当您的脚本标签位于文档头部时。否则，当 JavaScript 运行时，DOM 可能还没有包含所需的元素。

【讨论】：

【解决方案2】：

我认为你使用的方法 document.getElementById 错误。

尝试使用

var input = document.getElementById('fileInput');

代替

var input = document.getElementById('#fileInput');

【讨论】：