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
Делаем форму обратной связи на сайте
Делаем форму обратной связи на сайте

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

Задача с собеседования: как найти палиндром
Задача с собеседования: как найти палиндром

Элитная задача с сайта Leetcode

easy
Что означает ошибка: TypeError: toUpperCase is not a function
Что означает ошибка: TypeError: toUpperCase is not a function

Функция есть, но она не знает, что ей делать

easy
Как убрать что угодно на любом сайте
Как убрать что угодно на любом сайте

Самый популярный приём разработчиков.

easy
Отладка Python-кода с помощью pdb
Отладка Python-кода с помощью pdb

В сложных программах это лучше, чем print()

hard
Проект: собственный поиск по странице на jQuery
Проект: собственный поиск по странице на jQuery

Потому что почему бы и нет.

medium
medium