CodeInMyHeart
@CodeInMyHeart
SOS

Почему не работает?

Здраствуйте! Подскажите, почему не работает этот код:
let hero = document.getElementsByClassName('hero');
console.log(hero.offsetHeight);


Выводит undefined просто без причины. Непонимаю, что за хрень происходит, как обычно все работает, а потом резко что то не так. Javascript. Вот HTML:

<article class="hero">
            <header class='align top_header'>
                <a href="#" class="logo">
                    CS
                </a>
                <div class="top_navigation">
                    <nav class="top_menu">
                        <a href="#">Home</a>
                        <a href="#">Pages</a>
                        <a href="#">Features</a>
                        <a href="#">Extensions</a>
                        <a href="#">Tutorials</a>
                        <a href="#">Contact Us</a>
                    </nav>
                    <nav class="social_nets">
                        <i class="fab fa-facebook-f"></i>
                        <i class="fab fa-twitter"></i>
                        <i class="fab fa-skype"></i>
                        <i class="fab fa-linkedin-in"></i>
                    </nav>
                </div>
            </header>

            <hr>
            <h1>CREATIVIES</h1>
            <h2 class="link"><a href="#">POWER BY PSDFREEBIES.COM</a></h2>
            <div class="scroll_down" onclick=scrollDown()>
                <p>Sroll Down</p>
                <div class="circle">
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </article>


Я делал все это по нажатию кнопки, сайт полностью к этому времени загружался. Вобщем, заранее спасибо)
  • Вопрос задан
  • 131 просмотр
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
document.getElementsByClassName возвращает список элементов, а не один элемент.
let heroBlocks = document.getElementsByClassName('hero');
if (heroBlocks.length > 0) {
   let hero = heroBlocks[0];
   console.log(hero.offsetHeight);
}

ну, или можно в лоб
let hero = document.getElementsByClassName('hero')[0];
console.log(hero.offsetHeight);

или используя querySelector
let hero = document.querySelector('.hero');
console.log(hero.offsetHeight);

UPD: дам совет, научитесь использовать инструменты отладки, например вкладка Sources инструментов разработчика хрома. Там можно проставить breakpoint точку остановки скрипта, и навести мышкой на нужную переменную, и узнать, что же она на самом деле содержит.
Ну, или дедовским способом
let hero = document.getElementsByClassName('hero');
console.warn(hero);  // выведет HTMLCollection [], вы сразу поймете, что это не элемент, а коллекция/список.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы