文件数据在textarea中不可见，但可以使用getElementsByClassName在console.log中看到

Question

在这里，我尝试读取第一个文件，并在单击“运行”按钮时尝试在文本区域中显示它。 当我使用getElementByID ，出现错误

Uncaught TypeError: Cannot set property 'value' of null

但是，当我将文本区域放在存在按钮RUN相同<div>标记中时， getElementByID可以工作。 但是我应该使用以下格式，但是出现错误。 我的getElementsByClassName没有收到任何错误，但我只能在console.log中看到该值，但它不会显示在文本区域中。

 function loadFileAsText(){ var fileToLoad = document.getElementById("fileUploader").files[0]; var textFromFileLoaded; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent){ textFromFileLoaded = fileLoadedEvent.target.result; console.log(textFromFileLoaded); document.getElementsByClassName("classTextarea")[0].value = textFromFileLoaded; console.log(document.getElementsByClassName("classTextarea").value); }; fileReader.readAsText(fileToLoad); } 

  <div class="button files"> <input id="fileUploader" type="file" multiple="multiple"> </div> <div class="button run"> <span type="button" onclick="loadFileAsText()">Run</span> </div> <article class="editor multiline"> <div class="pad"> <textarea id="idTextarea" class="classTextarea"> </textarea> </div> </article> 

Answer 1

document.getElementsByClassName("classTextarea")返回元素数组，您需要选择第一个：

 function loadFileAsText() { var fileToLoad = document.getElementById("fileUploader").files[0]; var textFromFileLoaded; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { textFromFileLoaded = fileLoadedEvent.target.result; console.log(textFromFileLoaded); document.getElementsByClassName("classTextarea")[0].value = textFromFileLoaded; console.log(document.getElementsByClassName("classTextarea")[0].value); }; fileReader.readAsText(fileToLoad); } 

 .as-console-wrapper { max-height: 40px !important; } 

 <div> <div class="button files"> <input id="fileUploader" type="file" multiple="multiple"> </div> <div class="button run"> <span type="button" onclick="loadFileAsText()">Run</span> </div> </div> <article class="editor multiline"> <div class="pad"> <textarea id="idTextarea" class="classTextarea"> </textarea> </div> </article> 

Answer 2

仅将document.getElementsByClassName("classTextarea")更改为document.getElementsByClassName("classTextarea")[0]正常工作。 当您不选择文件时，只会得到undefined错误。

 function loadFileAsText(){ var fileToLoad = document.getElementById("fileUploader").files[0]; var textFromFileLoaded; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent){ textFromFileLoaded = fileLoadedEvent.target.result; console.log(textFromFileLoaded); document.getElementsByClassName("classTextarea")[0].value = textFromFileLoaded; console.log(document.getElementsByClassName("classTextarea")[0].value); }; fileReader.readAsText(fileToLoad); } 

  <div class="button files"> <input id="fileUploader" type="file" multiple="multiple"> </div> <div class="button run"> <span type="button" onclick="loadFileAsText()">Run</span> </div> <article class="editor multiline"> <div class="pad"> <textarea id="idTextarea" class="classTextarea"> </textarea> </div> </article>