Допустим, вы делаете страницу с формой и полем ввода:
<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="...">
Второй вариант — поместить вызов скрипта сразу после формы, тогда к моменту вызова всё окажется на своих местах и ошибки не будет. Или вообще в конце всего документа.
