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

【问题标题】：Cannot read property 'appendChild' of null and other null variables无法读取 null 和其他 null 变量的属性“appendChild”
【发布时间】：2017-02-14 10:50:33
【问题描述】：

在开始之前，我只想让您知道我对 Web 开发还很陌生。我还想保留这个 100% 的 javascript，所以暂时不要使用 jquery 或其他语言。

以下代码来源于此视频： 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

或

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

最后一个 appendChild 函数似乎不起作用，我查看了与此类似的其他问题，但似乎找不到。相关的 HTML 代码只是一个 div，但如果你想要它，它是：

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

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

【问题讨论】：

这个错误意味着你的chartContainer变量是null。这反过来意味着您的 _div() 函数无法在页面中找到该元素。
如果您的脚本放在<head> 中，它会在浏览器看到文档正文之前运行，因此代码将找不到它。
“所以没有 jquery 或其他语言” - 请注意，jQuery 不是另一种语言，它是一个 JavaScript 库：即用 JavaScript 编写的函数集合。

标签： javascript html

【解决方案1】：

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

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

这是一个 jsbin。

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

【讨论】：