Как нацелить li в ul без использования идентификаторов? - PullRequest
Новая
       24

Как нацелить li в ul без использования идентификаторов?

1 голос
/ 06 ноября 2019

Я пытаюсь присоединить eventListeners к каждому из этих li в ul моего HTML. Это для домашнего задания, поэтому я не могу изменить HTML вообще. Вот мой HTML, li, который я пытаюсь изменить, это две кнопки внутри класса ul 'pagination': 

    <body>

        <!-- Gallery HTML -->
        <section id="gallery">

            <h2>Image <strong>Gallery</strong></h2>

            <!-- Gallery Image & Details -->
            <article>
                <p><img 
                    src="images/winter.jpg" 
                    alt="Winter Landscape: Snow covered mountains">
                </p>            
                <h3>Image Caption</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </article>

            <!-- Thumbnail Pagination -->
            <ul class="pagination">
                <li><button>previous</button></li>
                <li><button>next</button></li>
            </ul>

        </section>

        <!-- Javascript -->
        <script src="js/gallery.js"></script>

    </body>

Я пробовал это в своем JavaScript: 

let nextButton = pageSection.getElementsByTagName('li:first-of-type');
let prevButton = pageSection.getElementsByTagName('li:last-of-type');

Однако, если я console.log (nextButton) или console.log (prevButton), они оба возвращаются как HTMLcollection [] в консоли браузера. Я не уверен, правильно ли он нацеливается.

Вот пример eventListener: 

nextButton.addEventListener("click", function changeImageNext(){

            for (i = 0; i < templateArray.length; i++){
                // console.log(articles[i]+ " " + i);

                activeArticle = articles.length[i + 1];

                // inserts the updated html into the html file
                galleryHeading.insertAdjacentHTML('afterend',templateArray[i]);

            }
        });

Но в браузере возвращается эта ошибка: Uncaught TypeError: nextButton.addEventListener не является функцией

Я только начал изучать JavaScript и HTML на этой неделе, так что я еще не очень хорошо разбираюсь. Кроме того, я не могу использовать JQuery или любые другие фреймворки!

Спасибо за вашу помощь!

Ответы [ 3 ]

1 голос
/ 06 ноября 2019

Поскольку вы знаете, что у вас есть две li внутренности .pagination, вы можете использовать document.querySelectorAll, который возвращает массив элементов. Просто наведите указатель на индекс элемента в массиве. Пример: 

let navButtons = document.querySelectorAll('.pagination li');
let prevButton = navButtons[0];
let nextButton = navButtons[1];

prevButton.addEventListener('click', (event) => {

});

nextButton.addEventListener('click', (event) => {

});
0 голосов
/ 07 ноября 2019

попробуйте: 

let nextButton = document.getElementsByClassName("pagination")[0].children[0]
let prevButton = document.getElementsByClassName("pagination")[0].children[1]
0 голосов
/ 06 ноября 2019

document.getElementsByTagName ("LI")

Это вернет вам список всех тегов li. Зацикливайтесь на этом списке, выбирайте по индексу, делайте с ним все, что хотите.

Поскольку у вас нет другого li в теле, вам не нужно беспокоиться о каких-либо специальных селекторах

"li: last-of-type" неверен, но getElementsByTagName толькоищет принять имя тега для поиска. Не какие-либо специальные классы sudo

...