javascript - 单击时关闭小部件

Question

我有一些脚本可以将小部件滑出并在单击时隐藏它，它在单击时显示但不隐藏。

我在控制台中看到此错误

Uncaught TypeError: Cannot set property 'onclick' of null

我不确定为什么我的小部件在点击 id="closewiget"

时没有关闭

   (function (window) {
    'use strict';

    function classReg(className) {
        return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
    }

    var hasClass, addClass, removeClass;

    if ('classList' in document.documentElement) {
        hasClass = function (elem, c) {
            return elem.classList.contains(c);
        };
        addClass = function (elem, c) {
            elem.classList.add(c);
        };
        removeClass = function (elem, c) {
            elem.classList.remove(c);
        };
    }
    else {
        hasClass = function (elem, c) {
            return classReg(c).test(elem.className);
        };
        addClass = function (elem, c) {
            if (!hasClass(elem, c)) {
                elem.className = elem.className + ' ' + c;
            }
        };
        removeClass = function (elem, c) {
            elem.className = elem.className.replace(classReg(c), ' ');
        };
    }

    function toggleClass(elem, c) {
        var fn = hasClass(elem, c) ? removeClass : addClass;
        fn(elem, c);
    }

    window.classie = {
        hasClass: hasClass,
        addClass: addClass,
        removeClass: removeClass,
        toggleClass: toggleClass,
        has: hasClass,
        add: addClass,
        remove: removeClass,
        toggle: toggleClass
    };

})(window);

var
    menuRight = document.getElementById('cbp-spmenu-s2'),
    showRight = document.getElementById('showRight'),
    closewiget = document.getElementById('closewiget'),
    body = document.body;

showRight.onclick = function () {
    classie.toggle(this, 'active');
    classie.toggle(menuRight, 'cbp-spmenu-open');
    $('.onetwothree').attr('src','');
    $('.onetwothree').attr('src','https://embed.widgetpack.com/widget/img/google_rating_logo_36.png');
};
closewiget.onclick = function () {
    classie.toggle(this, 'active');
    classie.toggle(menuRight, 'cbp-spmenu-open');
    $('.onetwothree').attr('src','');
    $('.onetwothree').attr('src','https://embed.widgetpack.com/widget/img/google_rating_logo_36.png');
};

更新请求添加 HTML

我在不同的 JS 文件中使用 id="closewiget"，如下

 var averageRating = '<div class="da-all db-all" style="margin-bottom:110px">' +
            '<h4>' +
            '<img class="db-hide onetwothree" style="padding-top:5px;" src="https://embed.widgetpack.com/widget/img/google_rating_logo_36.png" alt=' + firmname + '>' +
            '<span class="da2-da6 db1-db3" style="font-size: 1.1rem">' + firmname + '</span>' +
            '<i class="da8 db4 fa fa-angle-double-right" id="closewiget"  aria-hidden="true"></i>' +
            '<div class="da2-da5 db1-db3" style="font-size: 1.3rem">' +
            '<em class="da6-da8" id="em-padd" style="font-size: 1.3rem;">' + averageRatingResult + '</em>';

Answer 1

这可能意味着该元素尚未在 DOM 中。所以这个 javascript 位于页面源代码中的元素上方。

您可以使用 onload 事件、setTimeout 调用或重新排序 HTML 来解决此问题。