点击RUN按钮读取文件至textarea遇异常：getElementById报错、getElementsByClassName不显示

我来帮你排查并解决这个问题，先拆解核心问题，再给出修正后的代码：

问题根源分析 #

1. getElementById报错的原因：你提到用getElementById时抛出Cannot set property 'value' of null，大概率是这两种情况：

   • 你之前尝试的代码中，脚本在<textarea>元素渲染完成前就执行了getElementById（但你的loadFileAsText是点击触发的，这种可能性很低）；
   • 可能存在id拼写错误——你的textarea的id是idTextarea，必须严格匹配才能找到元素。

2. getElementsByClassName看似无效的原因：你的代码里document.getElementsByClassName("classTextarea")[0].value = textFromFileLoaded;这行其实是正确的，但后面的console.log(document.getElementsByClassName("classTextarea").value);写错了：getElementsByClassName返回的是HTMLCollection集合，不是单个元素，直接访问.value会得到undefined，让你误以为赋值没成功，实际上内容已经写到textarea里了。

修正后的代码 #

推荐直接用getElementById，它比类选择器更高效且不易出错，只要确保id正确就能无视DOM结构层级问题：

function loadFileAsText(){
  var fileToLoad = document.getElementById("fileUploader").files[0];
  // 先判断是否选中文件，避免无文件时报错
  if (!fileToLoad) {
    alert("请先选择一个文件再点击Run");
    return;
  }
  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent){
    var textFromFileLoaded = fileLoadedEvent.target.result;
    console.log(textFromFileLoaded);
    // 通过id精准定位textarea
    var targetTextarea = document.getElementById("idTextarea");
    targetTextarea.value = textFromFileLoaded;
    console.log(targetTextarea.value); // 正确输出已赋值的内容
  };
  fileReader.readAsText(fileToLoad);
}

你的HTML结构完全不需要改动，保持原有层级即可：

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

额外优化建议 #

• 替换内联onclick：用addEventListener绑定事件，代码更易维护，也更符合现代前端规范：

  // 在脚本末尾添加这段代码，同时去掉HTML中的onclick属性
  document.querySelector(".button.run span").addEventListener("click", loadFileAsText);
  

内容的提问来源于stack exchange，提问作者JSCoder