无法读取属性'addEventListener'菜单上为null的

Cannot read property 'addEventListener' of null on menu

本文关键字：null 菜单 addEventListener 读取 属性      更新时间：2023-09-26

尝试实现响应菜单。添加了如下的脚本

    (function() {
    var bodyEl = document.body,
        content = document.querySelector( '.content-wrap' ),
        openbtn = document.getElementById( 'open-button' ),
        closebtn = document.getElementById( 'close-button' ),
        isOpen = false;
    function init() {
        initEvents();
    }
    function initEvents() {
        openbtn.addEventListener( 'click', toggleMenu );
        if( closebtn ) {
            closebtn.addEventListener( 'click', toggleMenu );
        }
        // close the menu element if the target it´s not the menu element or one of its descendants..
        content.addEventListener( 'click', function(ev) {
            var target = ev.target;
            if( isOpen && target !== openbtn ) {
                toggleMenu();
            }
        } );
    }
    function toggleMenu() {
        if( isOpen ) {
            classie.remove( bodyEl, 'show-menu' );
        }
        else {
            classie.add( bodyEl, 'show-menu' );
        }
        isOpen = !isOpen;
    }
    init();
})();

标记包括必要的类和按钮。由于某种原因，我在openbtn.addEventListener（'click'，toggleMenu）；上无法读取null的属性'addEventListener'；。Javascript新手还没能解决这个问题。

有什么建议吗？

在执行脚本时，元素很可能不在DOM中。在DOM初始化之后，您将需要调用init方法。

将脚本移动到body标记之后的底部。或者使用jquery并在$(document).ready()中调用init方法。

此外，考虑将变量初始化移动到init方法

    bodyEl = document.body,
    content = document.querySelector( '.content-wrap' ),
    openbtn = document.getElementById( 'open-button' ),
    closebtn = document.getElementById( 'close-button' )

以便它们在加载dom之后读取正确的值，而不是在初始化脚本时读取。

相关文章：