DOM元素未加载引发'Uncaught ReferenceError'错误的解决咨询

• 确保代码在DOM完全加载后执行
  把你的脚本放在HTML文档的</body>结束标签之前，这样浏览器会先加载完所有DOM元素再执行JavaScript代码。如果必须放在<head>里，就用DOMContentLoaded事件监听：

  document.addEventListener('DOMContentLoaded', function() {
    // 在这里写所有操作DOM的代码
    const poster = document.getElementById('poster');
    invisibleExcept(poster);
  });
  

• 检查poster变量的定义逻辑
  确认你已经通过document.getElementById、querySelector等方法正确获取到目标DOM元素并赋值给poster。如果poster是动态生成的元素，必须等元素被添加到DOM树之后再调用invisibleExcept函数：

  // 动态创建并添加元素
  const poster = document.createElement('div');
  poster.id = 'poster';
  document.body.appendChild(poster);
  
  // 元素已存在于DOM中，再调用函数
  invisibleExcept(poster);
  

• 排查invisibleExcept函数的调用与定义
  检查invisibleExcept函数的参数要求，确保你调用时确实传入了poster变量。如果函数内部错误地直接使用了未定义的poster变量，而不是通过参数接收，那需要修改函数逻辑，改为接收目标元素作为参数：

  // 正确的函数定义示例
  function invisibleExcept(targetElement) {
    // 操作targetElement，而不是未定义的poster
    targetElement.style.display = 'block';
    // 其他隐藏逻辑...
  }
  

内容的提问来源于stack exchange，提问作者Jord van Eldik