无法读取 null 和其他 null 变量的属性“appendChild”

2024-04-27

在开始之前,我想让您知道我对 Web 开发还很陌生。我还想保留这个 100% javascript,所以现在没有 jquery 或其他语言。

以下代码源自该视频:https://www.youtube.com/watch?v=esa5hJegRfI https://www.youtube.com/watch?v=esa5hJegRfI

我收到的错误如下:

未捕获的类型错误:无法读取 null 的属性“appendChild” 在drawBarChart (script.js:58) 在 script.js:66

这是 JavaScript:

var sampleData = [23,45,14,47,24,57,24,35];

function _div(id){
    return document.getElementById(id);
}

function drawBarChart(dataset, idOfContainer){

var chartContainer = _div(idOfContainer)

if(typeof(dataset) != "object"){
    return;
}

var heightOfContainer = chartContainer.scrollWidth;

var widthOfContainer = chartContainer.scrollHeight;

var widthOfBar = parseInt(widthOfContainer / dataset.length) - 2;

for(var i = 0; i < dataset.length; i++){

    var divElement = document.createElement("div");

    divElement.setAttribute("class", "div2");

    divElement.style.marginLeft = parseInt(i * 2 + i * widthOfBar) + "px";
    divElement.style.height = parseInt(dataset[i]) + "px";
    divElement.style.width = parseInt(widthOfBar) + "px";
    divElement.style.top = (heightOfContainer - parseInt(dataset[i]) - 1) + "px";
    chartContainer.appendChild(divElement);

}
return false;
}



drawBarChart(sampleData, "div1");



console.log();

由于相同的错误,变量 heightOfContainer 和 widthOfContainer 不起作用:

未捕获的类型错误:无法读取 null 的属性“scrollWidth” 在drawBarChart (script.js:42) 在 script.js:66

or

未捕获的类型错误:无法读取 null 的属性“scrollHeight” 在drawBarChart (script.js:44) 在 script.js:66

最后一个appendChild函数似乎不起作用,我已经查看了与此类似的其他问题,但似乎找不到一个。 关联的 HTML 代码只是一个 div,但如果您想要它在这里,它是:

<div id="div1" ></div>

我知道这个错误是非常个人化的,不会影响其他人,但我已经向其他地方寻求帮助,但我找不到它为什么不起作用的原因。希望您能提供帮助并感谢您的宝贵时间。


您的代码在 DOM 准备好之前加载,因此选择器无法在页面上找到这些元素。

您可以将 JS 放在页面底部,以便在代码运行之前完全加载 DOM,然后再运行您的div元素可供选择器使用。

这里有一个jsbin。

http://jsbin.com/poqefopuyu/edit?html,输出 http://jsbin.com/poqefopuyu/edit?html,output

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法读取 null 和其他 null 变量的属性“appendChild” 的相关文章

随机推荐

  • EF6/SQL Server Compact,基于代码的配置

    我正在尝试将我的 EF6 配置从myexe exe config编码作为解决方法empty DbProviderFactories node in machine config 问题 此处描述 https stackoverflow com
  • 从 Excel 与 VBA 调用时,VBA UDF 给出不同的答案

    以下 VBA 函数计算给定范围内包含公式的单元格数量 从 VBA 子程序调用时它可以正常工作 从 Excel 调用时 它返回区域中的单元格总数 来自 Excel 的调用是 CountFormulas A1 C7 即使该范围内只有两个带有公式
  • jQuery 数据表隐藏头部

    如果表没有任何数据 我想隐藏数据表标题 oTable topics showTopics dataTable bLengthChange false bStateSave true iDisplayLength 12 bScrollColl
  • 使用api在github中生成个人访问令牌

    有什么方法可以通过我的用户名和密码登录我的 github 帐户并使用 api 生成个人访问令牌吗 UPDATE 根据这个博客文章 https developer github com changes 2020 02 14 deprecati
  • 20个问题AI算法是如何运作的?

    包含 20 个问题的简单在线游戏 由极其准确的人工智能提供支持 他们怎么猜得这么好 您可以将其视为二分搜索算法 在每次迭代中 我们都会提出一个问题 这应该消除大约一半的可能的单词选择 如果总共有 N 个单词 那么我们可以期望在 log2 N
  • 从redis中检索大数据集

    一台服务器上的应用程序查询另一台服务器上运行的 Redis 查询的结果数据集约为 250kzrangebyscore objects locations inf inf这在应用程序服务器上似乎需要 40 秒 当使用命令执行时redis cl
  • 使用负等式表达式进行 resharper 自定义模式替换

    我在 resharper 中有一条规则来查找对 Nullable HasValue 的调用 T foo if foo HasValue And it offers to replace with a comparison directly
  • 当所有子记录满足条件时仅选择父记录

    我有两个表 A 和 B 当所有子项 表 B 中 满足条件时 我只需要父项 A 的行 如果 B 中的一行不符合条件 那么我不需要父 A 的行 我想我需要在这里使用存在 但不展示如何使用 以下是数据表 Table A Primary Key L
  • Dao 和服务接口的需求

    我是Spring Mvc的新手 在很多教程中 我发现有一个像这样的Dao接口 public interface StudentDAO public List
  • 将 Selenium HTML 测试自动转换为 JUnit 的方法?

    我在 Mac 10 6 6 上使用 Selenium IDE 1 0 10 for Firefox 我们的 QA 部门已经为 Selenium 创建了一些 HTML 测试 我需要将其转换为 Junit 在 IDE 中 我可以通过转到 文件
  • 使用 javascript/jquery 仅选择特定元素后面的文本

    如下面的代码片段所示 我有多个文本 div 其中有粗体部分 然后是换行符 然后是一段文本 我可以 find 粗体部分 但如何使用 javascript jquery 只获取粗体部分后面换行符后面的文本部分 div class thecont
  • 如何为 Android 应用实施 Google Play 许可? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 Locked 这个问题及其答案是locked help locked posts因为这个问题是题外话
  • Hadoop:处理大型序列化对象

    我正在开发一个应用程序来使用 Hadoop 框架处理 和合并 几个大型 java 序列化对象 顺序 GB 大小 Hadoop 存储将文件块分布在不同的主机上 但由于反序列化需要所有块都存在于单个主机上 因此它会极大地影响性能 我该如何处理这
  • 如何解析 iPhone 中本地存储的 XML 文件?

    如何解析 iPhone 中本地存储的 XML 文件 请使用代码片段帮我解决这个问题 我已经使用了 NSXMLParser 并且实现了它 我的资源中有 r xml 文件 我刚刚解析标题并使用 NSXMLParser 显示 r xml
  • 如何使弹性盒与需要截断文本的嵌套子项一起使用?

    要让 flex child 截断带有省略号的文本 可以给父级一个 min with 0 在我的项目中 子组件嵌套在几乎 10 个不同的弹性容器中 我是否需要给所有父母一个 min width 0 或者有更好的解决方法吗 sandbox ht
  • 呈现模型与被动视图

    我想知道上述两种模式之间的区别 当您考虑到您需要在表示模型模式中同步代码并且该代码位于表示模型本身中时 那么我认为这些模式非常相似 两者都将事件委托给演示模型 演示者 演示模型和演示者命令域模型 并且也观察域模型 当发生更改时 它们都与视图
  • 推送通知不会弹出带有入门套件的react-native-firebase

    我已经克隆了React Native Firebase 启动器 https github com invertase react native firebase starter并进行了初始设置 然后根据文档重命名项目 然后添加google
  • Clojure/Java:用于声音频谱分析的 Java 库? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个可以接受大量音频数据并返回给定频带内随时间变化的平均幅度的库 我已经在 comp dsp
  • 如何将某些视图的自旋转限制为单一方向,同时允许其他视图的所有方向?

    这个问题是关于 iOS 设备旋转和 UINavigationController 中的多个受控视图 有些观点应该是仅限于纵向方向 有些应该自由自转 如果您尝试使用三个视图创建最简单的设置 您会注意到自动旋转行为有一些非常令人讨厌的怪癖 然而
  • 无法读取 null 和其他 null 变量的属性“appendChild”

    在开始之前 我想让您知道我对 Web 开发还很陌生 我还想保留这个 100 javascript 所以现在没有 jquery 或其他语言 以下代码源自该视频 https www youtube com watch v esa5hJegRfI