Получение сообщения «Невозможно прочесть значение свойства null» на странице 1 для идентификатора на странице 3

Question 1

Итак, у меня есть статический веб-сайт, на котором у меня 3 страницы. И все страницы имеют один файл Javascript.

Страница 3 содержит холст с идентификатором canvas. Итак, теперь, когда я пытаюсь перейти на страницу 1, веб-сайт прерывается с ошибкой в консоли, которая говорит:

Cannot read property 'getContext' of null.

На странице 1 нет элемента холста. Что можно было сделать в этой ситуации?

Вот код:

HTML

<canvas id="canvas" width="800" height="500"></canvas>

JS

const canvas                    = document.getElementById('canvas');
const ctx                       = canvas.getContext('2d');

javascript html jquery

0

A. Amit 28 Фев 2021 в 13:19

Answer

Вам нужно будет проверить, является ли константа холста нулевой, прежде чем обращаться к ней.

if (canvas) {
 const ctx = canvas.getContext('2d');

 // do stuff
}

Если вы используете es6, вы можете выполнить Optional Chaining < / a> вот так

const ctx = canvas?.getContext('2d'); // returns undefined if canvas is null

Имейте в виду, что не все браузеры поддерживают es6 - если вам нужно поддерживать старые браузеры, вы можете скомпилировать свой скрипт с помощью babel или чего-то еще. одинаково.

1

Anders Grandjean-Thomsen 28 Фев 2021 в 10:24

Question 2

Вам нужно будет проверить, является ли константа холста нулевой, прежде чем обращаться к ней.

if (canvas) {
 const ctx = canvas.getContext('2d');

 // do stuff
}

Если вы используете es6, вы можете выполнить Optional Chaining < / a> вот так

const ctx = canvas?.getContext('2d'); // returns undefined if canvas is null

Имейте в виду, что не все браузеры поддерживают es6 - если вам нужно поддерживать старые браузеры, вы можете скомпилировать свой скрипт с помощью babel или чего-то еще. одинаково.

1

Anders Grandjean-Thomsen 28 Фев 2021 в 10:24

Получение сообщения «Невозможно прочесть значение свойства null» на странице 1 для идентификатора на странице 3

1 ответ

Похожие вопросы

Новые вопросы

javascript