Ситуация: вы пишете скрипт, в котором вам нужно выяснить расстояние от верха экрана до начала нужного элемента. У этого элемента есть класс .entry-content, и вы используете jQuery, чтобы достучаться до него:
// …var dh;dh = $('.entry_content').offset().top;
После запуска скрипта браузер выдаёт ошибку:
❌ TypeError: ‘undefined’ is not an object
Странно, но вы точно знаете, что таким способом можно искать элемент по его классу. Более того, точно такой же код работает тремя строчками выше и без ошибок.
Что это значит: браузер при виде точки понимает, что перед ним — объект, у которого есть какие-то свойства. Эта ошибка означает, что вы пытаетесь обратиться к свойствам несуществующего объекта.
Когда встречается: когда программист делает опечатки в имени объекта, неправильно объявляет его или начинает работать с чем-то, что точно не объект.
В нашем примере программист неправильно указал имя раздела при вызове, и вот что произошло:
- Браузер знает, что на странице есть элемент с классом entry-content, который написан через дефис.
- Программист увлёкся и поставил знак подчёркивания вместо дефиса.
- Скрипт попытался найти этот класс, но не смог, поэтому вернул значение undefined.
- После этого команда стала выглядеть так: dh = undefined.offset().top, но undefined.offset() — это не объект, а что-то неопределённое, у которого нет свойства top.
- Браузер выдаёт ошибку, что вообще-то это не объект и работать с ним он не будет.
Что делать с ошибкой TypeError: ‘undefined’ is not an object
Эта ошибка означает, что вы пытаетесь использовать как объект то, что им не является. Чтобы исправить эту ошибку, проверьте:
- нет ли у вас опечаток в именах и названиях (скорее всего);
- правильно ли вы определили нужный объект;
- в jQuery нужно будет дополнительно проверить, не теряется ли значение this или $ при использовании внутри функции;
- есть ли внутри вашей переменной или объекта вообще что-нибудь, с чем можно работать.
Попробуйте сами
У вас есть страница с элементом <h1 id="text-test"></h1> и JavaScript-кодом. При повторном запуске анимации он падает с нашей ошибкой. Попробуйте выяснить, почему так происходит.
document.addEventListener('DOMContentLoaded', function (event) {
var dataText = ["Test", "Hello", "Salut", "Bonjour"];
function typeWriter(text, i, fnCallback) {
if (i < (text.length)) {
document.getElementById("text-test").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';
setTimeout(function () {
typeWriter(text, i + 1, fnCallback)
}, 100);
}
else if (typeof fnCallback == 'function') {
setTimeout(fnCallback, 700);
}
}
function StartTextAnimation(i) {
if (typeof dataText[i] == 'undefined') {
setTimeout(function () {
StartTextAnimation(0);
}, 10000);
}
// ВОТ ТУТ ОШИБКА ↓
if (i < dataText[i].length) {
typeWriter(dataText[i], 0, function () {
StartTextAnimation(i + 1);
});
}
}
StartTextAnimation(0);
});
