Тип Ошибка: document.getElementById (...) null

<html> 
<head> 
</head> 
<body> 
<h2>Example of Line Graph</h2>  
<script src="../../../Scripts/Chart.min.js"></script> 
<script src="../../../Scripts/Chart.js"></script> 
<script> 
    var monthsData = { 
     labels: ["January", "February", "March", "April", "May", "June"], 
     datasets: [ 
     { 
      fillColor: "rgba(172,194,132,0.4)", 
      strokeColor: "#ACC26D", 
      pointColor: "#fff", 
      pointStrokeColor: "#9DB86D", 
      data: [203, 156, 99, 251, 305, 247] 
     } 
     ] 
    }; 
    var months = document.getElementById("chartData").getContext("2d"); 
    new Chart(months).Line(monthsData); 
</script> 
<div> 
    <canvas id="chartData" width="600" height="400"></canvas> 
</div> 
</body> 
</html>

Я видел предыдущую ошибку в отношении той же проблемы и исправил все, кроме моего, не разрешен. Я использую library.js library.Тип Ошибка: document.getElementById (...) null

источник

2016-06-09 Pruthvi Raj

Изменить код Как это

<html> 
<head> 
</head> 
<body> 
<h2>Example of Line Graph</h2>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 

<div> 
    <canvas id="chartData" width="600" height="400"></canvas> 
</div> 
<script> 
    var monthsData = { 
     labels: ["January", "February", "March", "April", "May", "June"], 
     datasets: [ 
     { 
      fillColor: "rgba(172,194,132,0.4)", 
      strokeColor: "#ACC26D", 
      pointColor: "#fff", 
      pointStrokeColor: "#9DB86D", 
      data: [203, 156, 99, 251, 305, 247] 
     } 
     ] 
    }; 
    var months = document.getElementById("chartData").getContext("2d"); 
    new Chart(months).Line(monthsData); 
</script> 

</body> 
</html>

источник

2016-06-09 06:28:23 Vikram

Теперь im сталкивается, как «график не определен» в строке «новый график (месяцы) .Line (monthsData);» –

- библиотека диаграмм i.e Chart.min.js loading? – Vikram

его не погрузка sir –

Поместите тэг script ниже div, который содержит элемент canvas.

Вы получаете сообщение об ошибке, поскольку в момент интерпретации и исполнения сценария в DOM не существует холст.

В MDN page about script tags говорится, что:

Сценарии без асинхронных или отсрочки атрибутов, а также встроенных сценарии, выбирается и выполняются немедленно, до того, как браузер продолжает разбирать страницу.

Это, как говорится, является причиной ошибки и простого обходного пути. Отъезд Satpal's answer для более идиоматического решения.

источник

2016-06-09 06:21:43 GolfWolf

Вы пытаетесь извлечь элемент перед его загрузкой. Так загрузите скрипт после загрузки страницы, используя window.onload обработчик события.

Событие нагрузки срабатывает в конце процесса загрузки документа. На данный момент, все объекты в документе, в DOM, и все изображения, скрипты, ссылки и подкадры закончили загрузку. (Taken from here)

<script> 
    window.onload = function() {  
    var monthsData = { 
     labels: ["January", "February", "March", "April", "May", "June"], 
     datasets: [{ 
     fillColor: "rgba(172,194,132,0.4)", 
     strokeColor: "#ACC26D", 
     pointColor: "#fff", 
     pointStrokeColor: "#9DB86D", 
     data: [203, 156, 99, 251, 305, 247] 
     }] 
    }; 
    var months = document.getElementById("chartData").getContext("2d"); 
    new Chart(months).Line(monthsData); 
    } 
</script>

источник

2016-06-09 06:22:48

Теперь его отражающее референс Error: График не определен в строке "новая диаграмма (месяцы) .Строка (monthsData);" –

@PruthviRaj: вам нужно включить библиотеку диаграмм перед сценарием –

теперь его работает отлично, спасибо –

Вы получаете выпуск, когда при выполнении инструкции document.getElementById("chartData") DOM еще не загружен. Таким образом, он не может найти элемент.

Вы должны использовать DOMContentLoaded событие

Событие DOMContentLoaded вызывается, когда первоначальный HTML документ был полностью загружен и разобран, не дожидаясь таблиц стилей, изображений и подрамники для завершения загрузки.

<script> 
document.addEventListener("DOMContentLoaded", function(event) { 
    console.log("DOM fully loaded and parsed"); 

    var monthsData = { 
     labels: ["January", "February", "March", "April", "May", "June"], 
     datasets: [ 
       { 
        fillColor: "rgba(172,194,132,0.4)", 
        strokeColor: "#ACC26D", 
        pointColor: "#fff", 
        pointStrokeColor: "#9DB86D", 
        data: [203, 156, 99, 251, 305, 247] 
       } 
      ] 
    }; 
    var months = document.getElementById("chartData").getContext("2d"); 
    new Chart(months).Line(monthsData); 
}); 
</script>

источник

2016-06-09 06:22:54 Satpal

Теперь его показ Ссылка Ошибка: Диаграмма не определена в строке «новый график (месяцы) .Строка (monthsData);» –

@PruthviRaj, загружается ли библиотека библиотеки? – Satpal

Сэр Как проверить, правильно ли загружена библиотека или нет. У меня есть копия chart.js и chart.min.js, и оба эти файла ссылаются (или), которые указаны в теге скрипта. –

Тип Ошибка: document.getElementById (...) null

ответ

Смежные вопросы