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

Question

[Август Милович]

Здраствуйте! Подскажите, почему не работает этот код:

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>

Я делал все это по нажатию кнопки, сайт полностью к этому времени загружался. Вобщем, заранее спасибо)

Answer 1

[Владимир Проскурин]

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 [], вы сразу поймете, что это не элемент, а коллекция/список.

Comments

[Август Милович]

Ага всё, большущее спасибо)