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

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

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

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

Вам может быть интересно:

Что означает ошибка: TypeError: ‘undefined’ is not an object

Что означает ошибка ReferenceError: Invalid left-hand side in assignment

Что означает ошибка SyntaxError: missing formal parameter

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

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

Что означает ошибка ReferenceError: Can't find variable

Что означает ошибка ReferenceError: Cannot access uninitialized variable

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

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

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

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

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

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

<script defer src=”…”>

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

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Обложка:

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

Корректор:

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

Вёрстка:

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