Question

我遇到一个问题，即我推着div（.arrow-div）时，在我的想象中它应该左右移动，但是什么也没发生，只会出现“ Uncaught TypeError：无法读取null的属性'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>

Answer 1

尝试一下： const arrowBtn = document.querySelector('.arrow-div');
如果您定义了d，则将执行arrow-div const arrowBtn = document.querySelector('#arrow-div');
您使用的语法用于img等html元素 const arrowBtn = document.querySelector('img');

控制台中出现“ Uncaught TypeError：无法读取属性'addEventListener'为null”

1 个答案: