@Kryptonit

Почему findIndex выдаёт ошибку?

Видимо где -то не доглядел, не могу понять почему ошибка mainScript.js:20 Uncaught TypeError: headerImages.isArray is not a function:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Port</title>
    <link rel="stylesheet" href="./assets/css/css/mainStyle.min.css">
</head>
<body>
    <header>
        <nav>

        </nav>
        <div class="nav-slider">
            <img class="nav-slider-img" data-visible="true" src="./assets/img/default/hero-1.jpg" alt="">
            <img class="nav-slider-img" data-visible="false" src="./assets/img/default/hero-2.jpg" alt="">
            <img class="nav-slider-img" data-visible="false" src="./assets/img/default/hero-3.jpg" alt="">
            <img class="nav-slider-img" data-visible="false" src="./assets/img/default/hero-4.jpg" alt="">
        </div>
    </header>

    <script src="./assets/js/mainScript.js"></script>
</body>
</html>


document.addEventListener('DOMContentLoaded', ()=>{
    headerImages = document.querySelectorAll('.nav-slider-img')

    function chgPicNavMenu(){
        headerImages.forEach(img => {
            if (img.getAttribute('data-visible') == "true"){
                console.log(headerImages.findIndex(img))
            }
        })
    }
    headerImages.forEach(img => {
        if (img.getAttribute('data-visible') == "true"){
            img.style.display = 'block'
        } else {
            img.style.display = 'none'
        }
    });
    
    setInterval(()=>{
        let visibleImgIndex = headerImages.isArray() ? headerImages.findIndex(img =>{
            return img.getAttribute('data-visible') == "true" 
        }) : -1 
        console.log(visibleImgIndex)
    }, 4000)
})
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
@smigles
1. У headerImages нет свойства isArray. Оно есть у Array: Array.isArray(...).
2. Array.isArray(headerImages) всегда даст false, потому что document.querySelectorAll возвращает NodeList, а не массив.
3. Хотите проверить NodeList на пустоту — проверяйте длину: headerImages.length !== 0 ? ....
4. У headerImages нет свойства findIndex, потому что это свойство массивов, а не NodeList.
5. Преобразовать NodeList в массив можно так: Array.from(headerImages).
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Alexandre888
@Alexandre888
Javascript-разработчик
Array.isArray(headerImages)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
25 нояб. 2024, в 15:52
3000 руб./за проект
25 нояб. 2024, в 15:43
1500 руб./за проект