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=”…”>

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

Обложка:

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

Корректор:

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

Вёрстка:

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

Через год — лучше работа, выше зарплата
В «Яндекс Практикуме» становятся разработчиками с нуля. Выберите язык — веб, Python, Java, C++ — и учитесь. Джуны зарабатывают от 80 000 ₽, мидлы — от 150 000 ₽. Дальше — программы трудоустройства и компенсация, если пойдёте в Яндекс.
Через год — лучше работа, выше зарплата Через год — лучше работа, выше зарплата Через год — лучше работа, выше зарплата Через год — лучше работа, выше зарплата
Вам может быть интересно
$ is not defined в jQuery: что это значит и что делать
$ is not defined в jQuery: что это значит и что делать
medium
ReferenceError: math is not defined — что это означает
ReferenceError: math is not defined — что это означает

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

medium
Uncaught SyntaxError: Unexpected token — что это означает?
Uncaught SyntaxError: Unexpected token — что это означает?

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

medium
Как быстро найти нужное место в списке
Как быстро найти нужное место в списке

Приём, которым пользуются многие программисты

Что означает ошибка OverflowError: Result too large в Python
Что означает ошибка OverflowError: Result too large в Python

Это значит, что результат получается слишком большим, чтобы его можно было обработать обычным способом

easy
Решаем задачу Эйнштейна перебором (и программированием)
Решаем задачу Эйнштейна перебором (и программированием)

Проверим 24 миллиарда комбинаций, почти не задействуя мозг

easy
Находим логарифм с помощью обычного цикла
Находим логарифм с помощью обычного цикла

Пишем простой код на Python

easy
Защита важных файлов: автоматический бэкап за пять минут
Защита важных файлов: автоматический бэкап за пять минут

Первый шаг в информационной суверенности

medium
Как сделать красивый сайт на Вордпрессе
Как сделать красивый сайт на Вордпрессе

Быстрее, чем экспресс-дизайн. Дешевле, чем экспресс-дизайн. Лучше, чем экспресс-дизайн.

medium
medium