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

Question

正在尝试实现响应式菜单。添加脚本如下

    (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 ) 上读取属性 'addEventListener' of null;。 Javascript 菜鸟，没能解决这个问题。

有什么建议吗？

Answer 1

很可能在执行脚本时，元素不在 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 加载后读取正确的值，而不是在脚本初始化时读取。

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

Cannot read property 'addEventListener' of null on menu

javascript

menu

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

Cannot read property 'addEventListener' of null on menu

javascript

menu

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