null 및 기타 null 변수의 'appendChild'속성을 읽을 수 없습니다.

시작하기 전에 저는 웹 개발에 새로운 경험이 있음을 알려 드리고자합니다. 나는 또한이 100 % 자바 스크립트 그래서 지금 jquery 또는 다른 언어를 유지하고 싶습니다.null 및 기타 null 변수의 'appendChild'속성을 읽을 수 없습니다.

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

이것은 자바 스크립트입니다 : https://www.youtube.com/watch?v=esa5hJegRfI

내가지고있어 오류는 다음과 같다 :

다음 코드는이 비디오에서 유래

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 기능

이 작동하지 않는 것 나는 이와 유사한 다른 문제에보고했지만 하나를 찾을 수 없습니다. '

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

이 오류가 매우 개인적인 알고 많은 다른 영향을 미치지 않습니다하지만 난 도움을 다른 곳 요청하고 난 나오지 않았어 : 연관된 HTML 코드는 사업부하지만, 당신이 여기 원하는 경우입니다 왜 그것이 작동하지 않았는지 알 수 없습니다. 희망과 시간을 내 주셔서 감사합니다.

출처

2017-02-14 Gaetan Almela

오류는 'chartContainer' 변수가'null '임을 의미합니다. 즉,'_div()'함수가 페이지에서 요소를 찾을 수 없다는 뜻입니다. – Pointy

스크립트가 ''에 있으면 브라우저가 문서 본문을보기 전에 실행되므로 코드에서 찾지 못합니다. – Pointy

* "jquery가 없거나 다른 언어"* - jQuery는 다른 언어가 아니며 JavaScript 라이브러리입니다. 즉, JavaScript로 작성된 함수 모음입니다. – nnnnnn