文件数据在TextArea中不可见，但可以使用GetElementsByClassName在Console.log中看到

Question

在这里，我正在尝试读取第一个文件，并在按下按钮运行时尝试在文本区域中显示它。当我使用getElementByID时，我会得到错误

Uncaught TypeError: Cannot set property 'value' of null

但是，当我将文本区域放在同一<div>标签中时，getElementByID在存在按钮RUN时起作用。但是我应该使用以下格式，但我会遇到错误。我对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>