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
Что делать, когда Python сам меняет значения списка
Что делать, когда Python сам меняет значения списка

Детективная история про указатели и память

medium
WebDAV: что это, как настроить и использовать протокол
WebDAV: что это, как настроить и использовать протокол

Делаем удалённую файловую систему сами

hard
Что означает ошибка SyntaxError: EOL while scanning string literal
Что означает ошибка SyntaxError: EOL while scanning string literal

Ошибка незакрытой строки

easy
Добавляем графический интерфейс программе для учебных тестов
Добавляем графический интерфейс программе для учебных тестов

Создаём полноценное и полезное десктопное приложение

easy
Работа с файлами в Python: полное руководство по open(), readline() и записи данных
Работа с файлами в Python: полное руководство по open(), readline() и записи данных

Как работать с разными текстовыми данными

easy
Что означает ошибка TypeError: unsupported operand type(s)
Что означает ошибка TypeError: unsupported operand type(s)

Коварная ошибка с типами данных в Python

easy
medium