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
Проект: делаем интерактивный интерфейс камеры телефона
Проект: делаем интерактивный интерфейс камеры телефона

В браузере можно сделать что угодно, даже айфон

hard
Что означает ошибка UnboundLocalError: local variable referenced before assignment
Что означает ошибка UnboundLocalError: local variable referenced before assignment

Одна из самых частых ошибок у начинающих в Python.

easy
Приёмы эффективного кода на Python
Приёмы эффективного кода на Python

Изучи и применяй

easy
Проект: красивая кнопка с анимированной подсветкой
Проект: красивая кнопка с анимированной подсветкой

Модные CSS-эффекты за 10 минут

easy
Разбор: задача про массив и сумму чисел
Разбор: задача про массив и сумму чисел

Простой код для собеседований

easy
Делаем форму обратной связи на сайте
Делаем форму обратной связи на сайте

Говорят, что если программист может написать форму обратной связи, он может написать всё.

medium