Итак, у меня есть статический веб-сайт, на котором у меня 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');
0
A. Amit 28 Фев 2021 в 13:19

1 ответ

Лучший ответ

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

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