Где находится ошибка в коде?

Question

[chiko22]

Помогите найти ошибку. В принципе код работает но браузер выдает

Uncaught TypeError: Cannot read property 'getContext' of null

Вот и сам код

var chart = document.getElementById("spiderChart").getContext("2d");
var secondChart = new Chart(chart, {
  type: "radar",
  data: {
    labels: ["Development", "Design", "SMM", "Marketing", "Recruit"],
    datasets: [
      {
        data: [300, 350, 130, 370, 124],
        backgroundColor: "rgba(10, 93, 255, .1)",
        borderColor: "#0A5DFF",
        lineTension: 0,
        borderWidth: 0,
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "mitter",
        pointBackgroundColor: "#0A5DFF",
        pointBorderColor: "white",
        hoverBackgroundColor: "#0A5DFF",
        pointBorderWidth: 2,
        pointHitRadius: 5,
        pointHoverRadius: 7,
        pointRadius: 7,
        fill: true,
      },
      {
        data: [200, 350, 330, 270, 324],
        backgroundColor: "rgba(32, 201, 51, .1)",
        borderColor: "#20C933",
        lineTension: 0,
        borderWidth: 0,
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "mitter",
        pointBackgroundColor: "#20C933",
        pointBorderColor: "white",
        hoverBackgroundColor: "#20C933",
        pointBorderWidth: 2,
        pointHitRadius: 5,
        pointHoverRadius: 7,
        pointRadius: 7,
        fill: true,
      },
    ],
  },
  options: {
    layout: {
      padding: {
        left: -10,
        right: 0,
        bottom: 0,
      },
    },
    scale: {
      ticks: {
        display: false,
      },
    },
    legend: {
      display: false,
      labels: {
        fontFamily: "Inter",
        fontSize: 14,
      },
    },
    tooltips: {
      enabled: true,
      mode: "single",
      tooltipFontFamily: "Inter",
      callbacks: {
        title: function (tooltipItem, data) {
          return data["labels"][tooltipItem[0]["index"]];
        },
        label: function (tooltipItem, data) {
          return data["datasets"][0]["data"][tooltipItem["index"]];
        },
      },
      backgroundColor: "#000",
      titleFontSize: 11,
      titleFontColor: "rgba(255, 255, 255, 0.6)",
      bodyFontColor: "#fff",
      bodyFontSize: 14,
      displayColors: false,
      titleAlign: "center",
      bodyAlign: "center",
      padding: {
        left: 11,
        right: 11,
        top: 4,
        bottom: 4,
      },
    },
  },
});

Comments

[Пашенька]

Нет элемента с id spiderChart на странице, по крайней мере на момент вызова этого скрипта.

Answer 1

[Maxim Kirshin]

1 строка, не может найти элемент spiderChart по id

Comments

[chiko22]

Пробовал #spiderChart. Но все равно выдает ошибку

[Maxim Kirshin]

chiko22, тебе правильно написали НА МОМЕНТ ВЫЗОВА СКРИПТА у тебя нет элемента в html с id="spiderChart".

Если рассмотреть самую банальную причину: у тебя тег script стоит выше (возможно в head), чем твой элемент с id="spiderChart"
Поэтому либо в скрипте добавляешь DOMContentLoaded (погугли), либо перемести тег в конец body

если не сработает - выкладывай код в песочницу

Answer 2

[xmoonlight]

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