来自 "How FIleReader.readAsText in HTML5 File API works" 的 FileReader 错误

Question

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

Uncaught TypeError: Cannot read property 'addEventListener' of null

我改编的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。

Answer 1

我想你使用的方法 document.getElementById 错了。

尝试使用

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

而不是

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

Answer 2

当码

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

失败并显示消息 Uncaught TypeError: Cannot read property 'addEventListener' of null，因此 document.getElementById('#fileInput') returns 为空。

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

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

或

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

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

来自 "How FIleReader.readAsText in HTML5 File API works" 的 FileReader 错误

FileReader Error from "How FIleReader.readAsText in HTML5 File API works"

html

javascript

file

filereader

我改编的Javascript代码

我改编的HTML5代码