无法设置属性 onclick 为 null答案

【问题标题】：cannot set property onclick of null无法设置属性 onclick 为 null
【发布时间】：2014-01-23 04:12:58
【问题描述】：

我今天在玩一些普通的 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>

但我得到了错误，

“不设置属性'onclick'为null”

当我这样尝试时：

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

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

【问题讨论】：

我想如果你用萤火虫或类似的东西调试它，它可能会给你答案。你的js是onload运行的吗？
如果您的脚本包含在结束正文标记之前，则不应出现此错误。

标签： javascript events onclick

【解决方案1】：

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

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

编辑：请注意，如果您有多个这些，则应将它们放在同一个 onload 函数中，否则最后一个将覆盖之前的。

【讨论】：