Javascript 无法解决未捕获的TypeError:无法读取属性'；类列表'；空的

我试图在按下按钮时隐藏

accountSlider

div。但是，当我按下按钮时，我得到：uncaughttypeerror:无法读取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>

希德斯利德先生{
转化：translateX（-110%）；
}
常量accountSlider=document.getElementById（“accountSlider”）；
const imageX=document.getElementById（“imageX”）；
函数hideSlider（）{
accountSlider.classList.add（“hideSlider”）；
}

---

谢谢你的帮助

您的html属性是class而不是id。将其更改为

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

---

或者使用querySelector（“.accountSlider”）

这很简单：如果在创建这些DOM节点之前在脚本中定义了要同步检索的DOM节点，那么这些方法将返回未定义的，因为还没有任何活动

如果在定义的全局函数中移动选择器（这是一种不好的做法，但被允许），则不会出现问题

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

就是这样。

getElementById（）

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

const accountSlider=document.getElementsByClassName（“accountSlider”）[0]/*或者使用document.querySelector（“.accountSlider”）*/
const imageX=document.getElementById（“imageX”）；
函数hideSlider（）{
accountSlider.classList.add（“hideSlider”）；
}

.hideSlider{
转化：translateX（-110%）；
}

。使用

.querySelectorAll（）

。能否给我们一个沙箱或您的输入HTML？您的脚本位于HTML元素之前，因此它在HTML解析到内存之前执行。将脚本移动到关闭

body

标记之前。这些方法将返回未定义的No，它们返回

null

。