时间戳

首页 > 解决方案 > 无法读取 null 的属性“clientHeight” - 工作 JSfiddle 教程在其他任何地方都不起作用？

javascript - 无法读取 null 的属性“clientHeight” - 工作 JSfiddle 教程在其他任何地方都不起作用？

问题描述

我正在关注一个试图教我如何设置基本 THREE.js 场景并添加滚动时触发的动画关键帧的教程。在小提琴内部，我了解关键帧的工作方式，并且能够得到我喜欢的结果。我试图在我自己的网站上重新创建小提琴，但这个错误不断被抛出。

我检查了与此类似但找不到修复的其他问题/答案。

在我的 'index.js' 的第 17 行，我得到一个“ Uncaught TypeError: Cannot read property: 'clientHeight' of null ”

显示 div '容器'的 HTML：

  <head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <script type="text/javascript" src="js/three.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  </head>
  <body>



  <div class='webgl'></div>
  <div class='container'></div>


  <span></span>



  </body>
</html>

第 17 行，clientHeight 抛出错误

var maxHeight = (divContainer.clientHeight || divContainer.offsetHeight) - window.innerHeight

这是一个有效的JS Fiddle，我试图将其用作我自己项目的起点。这是我正在使用的原始教程。

编辑：完整的 index.js和完整的 index.html

标签： javascripthtmlthree.js

解决方案

在这种情况下，要解决问题，您只需将文件移动到结束标记index.js的正上方。</body>

index.js 中的代码在尝试引用执行时不存在的 div 之前不会等待文档完成加载。因此错误。

有几种不同的方法可以解决这个问题，延迟脚本加载，在文档就绪类型函数中运行 JS 逻辑等等。如果你有时间，值得一读:)

推荐阅读