JavaScript读取表单textarea时报Cannot read property 'value' of null求助

直接诱因 #

你遇到的Uncaught TypeError: Cannot read property 'value' of null报错，是执行document.querySelector("#textarea1")时返回null，再读取value属性导致的，核心问题来自document.write的误用：

• validate函数在表单提交阶段触发，此时页面DOM已经完成渲染。页面加载完成后调用document.write会自动清空整个文档的原有DOM结构，你在代码第3行先执行了document.write(title)，此时原页面的#textarea1、#myimage等元素已经被全部删除，后续再获取对应元素自然返回null。

其他潜在问题 #

• 脚本加载时机不规范：你将JS脚本放在<head>标签内，未添加async/defer属性，也未包裹DOM加载完成监听事件，虽然本次报错不是该问题直接导致，但属于不规范写法，容易引发其他DOM获取失败问题。
• 表单默认提交行为未阻止：如果不手动阻止表单提交的默认跳转逻辑，你的调试输出逻辑也无法正常生效。
• 文件输入框取值逻辑错误：直接读取type="file"输入框的value只能得到选中文件的名称，无法获取文件本身，如需获取文件对象需要读取files属性。

修复方案 #

JS代码调整 #

// 包裹DOM加载完成监听，确保所有DOM节点渲染完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function () {
  // 挂载到window对象保证表单onsubmit属性可以访问到该函数
  window.validate = function () {
    // 优先读取所有需要的DOM值
    const title = document.getElementById("title").value;
    const textarea = document.querySelector("#textarea1").value;
    // 取文件对象用files属性
    const imageFile = document.getElementById("myimage").files[0];

    // 禁止使用document.write输出，改用console调试或手动插入DOM
    console.log('标题：', title);
    console.log('文本内容：', textarea);
    console.log('选中的图片文件：', imageFile);

    // 如需在页面展示，手动创建DOM节点插入
    const outputBox = document.createElement('div');
    outputBox.style.padding = '20px';
    outputBox.innerHTML = `
      <h3>提交内容预览</h3>
      <p>标题：${title}</p>
      <p>正文：${textarea}</p>
      <p>图片名：${imageFile ? imageFile.name : '未选择图片'}</p>
    `;
    document.body.appendChild(outputBox);

    // 不需要跳转则返回false，阻止表单默认提交行为
    return false;
  }
})

HTML脚本标签优化（可选） #

可以将脚本标签移到</body>闭合标签之前，或者给head内的script标签添加defer属性，确保DOM加载完成后再解析脚本：

<script src="js/addblogging.js" defer></script>

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