无法读取null和其他空变量的属性'appendChild'

在我开始之前，我只想让你知道我对web开发很陌生。我也想保持这个100％的JavaScript，所以现在没有jQuery或其他语言。无法读取null和其他空变量的属性'appendChild'

下面的代码从该视频来源： https://www.youtube.com/watch?v=esa5hJegRfI

我得到的错误是：

Uncaught TypeError: Cannot read property 'appendChild' of null at drawBarChart (script.js:58) at 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不起作用，因为有相同的错误：

Uncaught TypeError: Cannot read property 'scrollWidth' of null at drawBarChart (script.js:42) at script.js:66

或

Uncaught TypeError: Cannot read property 'scrollHeight' of null at drawBarChart (script.js:44) at script.js:66

最后的appendChild功能似乎并没有工作，我已经看过类似这样的其他问题，但似乎无法找到一个。相关的HTML代码仅仅是一个div，但如果你想在这里它是：

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

我知道这个错误是很个人的，不会影响到许多人，但我在其他地方寻求帮助和我不能”找出为什么它不起作用。希望你能帮助并感谢你的时间。

来源

2017-02-14 Gaetan Almela

该错误表示您的'chartContainer'变量为'null'。这反过来又意味着'_div（）'函数无法在页面中找到该元素。 – Pointy

如果您的脚本放置在''中，它会在浏览器看到文档正文之前运行，所以代码将无法找到它。 – Pointy

*“so no jquery or other languages”* - 请注意，jQuery不是另一种语言，它是一个JavaScript库：即用JavaScript编写的函数集合。 – nnnnnn

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

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

这是一个jsbin。

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

来源

2017-02-14 02:50:33

无法读取null和其他空变量的属性'appendChild'

回答

相关问题