"Неперехваченная ошибка типа: не удается прочитать свойство 'addEventListener' с нулевым значением" отображается в консоли

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня проблема в том, что при нажатии на div (.arrow-div), в моем воображении он должен перемещаться влево — вправо, но ничего не происходит, появляется только «Uncaught TypeError: не удается прочитать свойство ‘addEventListener’ с нулевым значением» в консоли. Было бы очень хорошо, если бы вы могли это решить!

PS Написание слов для публикации этого вопроса.

 const rightSlide = () => {
    const sideBox = document.querySelector('right-box');
    const arrowBtn = document.querySelector('arrow-div');

    arrowBtn.addEventListener('click', () => {
        sideBox.classList.toggle('right-box-active');
    });
}

rightSlide();

 .right {
    position: relative;
    display: block;
    min-height: 100vh;
}
.right-box {
    position: absolute;
    display: flex;
    min-height: 100vh;
    width: 100%;
    transform: translateX(92%);
    transition: transform 0.5s ease-in;
}
.content-box {
    display: flex;
    width: 100%;
    min-height: 100vh;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(255,255,255, .2);
}
.right-box-active {
    transform: translateX(0%);
}

 <body>
    <div class="container-fluid">
        <div class="row">
            <div class="left col-mb-4 col-lg-4">
                <div class="container">
                    <h4>Jānis Žogots</h4>
                    <div class="line"></div>
                    <ul>
                        <li><a href="#">Darbu piemēri</a></li>
                        <span>vai</span>
                        <li><a href="#">Kontaktu info</a></li>
                    </ul>
                </div>
            </div>
            <div class="right col-mb-8 col-lg-8">
                <div class="right-box">
                    <div class="arrow">
                        <div class="arrow-div">
                            <div style="display: flex;" class="arrow-left"></div>
                            <div style="display: none;" class="arrow-right"></div>
                        </div>
                    </div>
                    <div class="content-box">
                        Content Box
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="static/js/right-box.js"></script>        
</body>

Ответ №1:

попробуйте это : const arrowBtn = document.querySelector('.arrow-div');

если вы определили и d, вы бы выполнили arrow-div const arrowBtn = document.querySelector('#arrow-div');

используемый синтаксис u предназначен для html-элементов, таких как img const arrowBtn = document.querySelector('img');