Question

我试图按一下按钮隐藏accountSlider div。但是，当我按下按钮时，我得到：未捕获的TypeError：无法读取null的属性'classList'

我该如何解决？

这是我的代码

<style>

    .hideSlider {
        transform: translateX(-110%);
    }
</style>
<script>

    const accountSlider = document.getElementById("accountSlider");
    const imageX = document.getElementById("imageX");

    function hideSlider() {
        accountSlider.classList.add("hideSlider");
    }

</script>

<div class="accountSlider">
    <button id="closeButton" onclick="hideSlider()">
        <img src="@/assets/closeX.png" width="30" class="buttonImg" id="imageX" />
    </button>
</div>

感谢您的帮助！

Answer 1

您的html属性是类而不是id。为此更改

<div id="accountSlider">
    <button id="closeButton" onclick="hideSlider()">
        <img src="@/assets/closeX.png" width="30" class="buttonImg" id="imageX" />
    </button>
</div>

或使用querySelector（“。accountSlider”）

Answer 2

Submit方法将ID名称作为参数而不是类名称。

getElementById()

const accountSlider = document.getElementsByClassName("accountSlider")[0];/*or use document.querySelector(".accountSlider");*/
    const imageX = document.getElementById("imageX");

    function hideSlider() {
        accountSlider.classList.add("hideSlider");
    }

    .hideSlider {
        transform: translateX(-110%);
    }

Answer 3

这非常简单：如果您定义DOM节点，而该脚本试图在之前创建的脚本中同步检索，则这些DOM节点将被创建为未定义，因为没有任何活动

如果您在定义的全局函数中移动选择器（这是一个错误做法，但允许这样做），则不会有问题。

function hideSlider() {
    const accountSlider = document.querySelector(".accountSlider");
    accountSlider.classList.add("hideSlider");
}

就是这样。

无法解决未捕获的TypeError：无法读取null的属性“ classList”

3 个答案: