Uncaught TypeError: Cannot read property — что это означает

Нельзя прочитать то, чего нет.

Uncaught TypeError: Cannot read property — что это означает

Допустим, вы делаете страницу с формой и полем ввода:

<form name="myform">
  <input name="myinput" value="10" />
</form>

Нужно, чтобы скрипт нашёл эту форму, достал из неё значение поля ввода и вывел его на экран. Вы пишете скрипт и оформляете его как отдельный файл, который подключаете в разделе head:

<script>
  var str = '';
  for(i=0; i < document.myform.elements.length; i++){
     str += document.myform.elements[i].name +
'=' + encodeURIComponent(document.myform.elements[i].value) +
(i == document.myform.elements.length -1 ? '' : '&');
}
  alert(str);
</script>

Этот скрипт должен быть правильным. При тестировании внутри консоли он делает именно то, что нужно. Но после запуска скрипт падает с ошибкой:

❌ Uncaught TypeError: Cannot read property

Это означает: «Вы пытаетесь прочитать у объекта какое-то свойство, но я не могу его найти, а значит, не могу и прочитать то, чего нет».

Странно, ведь вы уверены, что у этого объекта такое свойство точно есть, и вы сто раз так уже делали.

Всё так и одновременно не так.

Что делать с ошибкой Uncaught TypeError: Cannot read property

Эта ошибка чаще всего происходит, когда вы обращаетесь к свойствам объекта раньше, чем объект готов:

  • Скорее всего, объект ещё не загрузился.
  • Может быть, этот объект должен появиться на странице по скрипту, который ещё не выполнился.
  • Допущена опечатка в названии объекта, поэтому при обращении к нему скрипт его не находит.

Наш случай — первый и самый распространённый: мы вызываем скрипт в разделе <head>, но форма у нас ещё не готова — она банально не загружена в документ, поэтому скрипт не может прочитать свойства несуществующей формы.

Чтобы избавиться от этой ошибки, нужно добавить в вызов скрипта атрибут defer — он заставит скрипт подождать, пока страница загрузится полностью, вместе с формой.

<script defer src="...">

Второй вариант — поместить вызов скрипта сразу после формы, тогда к моменту вызова всё окажется на своих местах и ошибки не будет. Или вообще в конце всего документа.

Обложка:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Маша Климентьева

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Вам может быть интересно
Uncaught SyntaxError: Unexpected token — что это означает?
Uncaught SyntaxError: Unexpected token — что это означает?

Самая популярная ошибка у новичков.

medium
ReferenceError: math is not defined — что это означает
ReferenceError: math is not defined — что это означает

Противная и неочевидная ошибка, которую очень легко исправить.

medium
$ is not defined в jQuery: что это значит и что делать
$ is not defined в jQuery: что это значит и что делать
medium
Как работает быстрая сортировка
Как работает быстрая сортировка

Ей уже 60 лет, но она до сих пор работает быстро

medium
Домашнее видеонаблюдение на Raspberry Pi
Домашнее видеонаблюдение на Raspberry Pi
hard
Пишем игру на Python, в которой нужно уворачиваться от предметов
Пишем игру на Python, в которой нужно уворачиваться от предметов

Работаем с текстом, анимациями и коллизиями

hard
Считаем деньги правильно: продвинутый Эксель и принцип Парето
Считаем деньги правильно: продвинутый Эксель и принцип Парето

Находим самые выгодные товары на продажу

easy
Три ИТ-проекта из России от читателей «Кода»
Три ИТ-проекта из России от читателей «Кода»

Время отечественного пиара.

Что означает ошибка AttributeError в Python
Что означает ошибка AttributeError в Python

Это когда мы пытаемся работать со свойствами и методами, которых нет

easy
medium