无法读取null和其他null变量的属性'appendChild' [英] Cannot read property 'appendChild' of null and other null variables

问题描述

在我开始之前，我只想让您知道我对Web开发还很陌生.我还想保留这种100％的javascript，因此暂时不使用jquery或其他语言.

Before I get started I just want to let you know I'm quite new to web development. I also want to keep this 100% javascript so no jquery or other languages for now.

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

The following code originates from this video: https://www.youtube.com/watch?v=esa5hJegRfI

我得到的错误如下:

未捕获的TypeError:无法读取null的属性'appendChild' 在drawBarChart(script.js:58) 在script.js:66

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

这是javascript:

This is the 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不起作用:

The variables heightOfContainer and widthOfContainer don't work because of the same error:

未捕获的TypeError:无法读取null的属性'scrollWidth' 在drawBarChart(script.js:42) 在script.js:66

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

或

未捕获的TypeError:无法读取null的属性'scrollHeight' 在drawBarChart(script.js:44) 在script.js:66

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

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

The last appendChild function does not seem to work and I have looked at other issues similar to this but can't seem to find one. The associated HTML code is just a div but if you want it here it is:

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

我知道此错误是非常个人的错误，不会影响其他许多错误，但是我已在其他地方寻求帮助，因此无法找出为什么该错误不起作用.希望您能有所帮助，并感谢您的宝贵时间.

I know this error is quite personal and won't affect many others but I have asked elsewhere for help and I couldn't find out why it didn't work. Hope you can help and thanks for your time.

推荐答案

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

Your code is loaded before the DOM is ready, so the selectors can't find those elements on the page.

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

You can put your JS at the bottom of the page so the DOM is fully loaded before the code is run and in turn your div element is available to the selector.

这是一个jsbin.

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

这篇关于无法读取null和其他null变量的属性'appendChild'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！