Question

我今天和一些简单的香草JS一起玩，并对onclick事件有疑问。

最好只显示代码：

function _(x) {
    return document.querySelector(x);
}
function toggleSlide(el, maxH) {
    var target = _(el);
    if(target.style.height == null || target.style.height == maxH+"px") {
        target.style.transition = "height 0.3s linear 0s";
        target.style.height = "0px";
    }else {
        target.style.transition = "height 0.3s linear 0s";
        target.style.height = maxH+"px";
    }
}

如果我将onclick事件添加到按钮中，那么一切都有效：

<button id="menu-btn" onclick="toggleSlide('#menu', 280)">Toggle</button>

但是我收到了错误，

“connot set property'onclick'of null”

当我尝试这样的时候：

_('#menu-btn').onclick = function() {
    toggleSlide('#menu', 280)
}

如何在不添加html中的 onclick 的情况下访问我的切换功能？

Answer 1

您正在尝试在按钮存在之前添加侦听器。将有问题的代码放在按钮后的单独<script>或onload中（首选，请参阅下面的代码）。

window.onload = function() {
    _("#menu").onclick = function() {
        toggleSlide('#menu', 280);
    };
};

编辑：请注意，如果你有多个这样的话，那么它们应该放在同一个onload函数中，或者最后一个函数会覆盖之前的函数。

无法设置null的属性onclick

1 个答案: