閉じるウィジェットをクリックすると

Question

私は、ウィジェットをスライドさせてクリックして隠すスクリプトをいくつか持っています。

私は私のコンソール

Uncaught TypeError: Cannot set property 'onclick' of null

イム私のウィジェットは、HTML

に追加するために要求さ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'); 
}; 

UPDATEのクリックで閉じていない理由がわからない中で、このエラーを見ています別の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の並べ替えを使用して修正できます。

Answer 2

jQueryを既に使用している場合、なぜdocument.getElementByIdを使用してからonclicksを割り当てようとしていますか？

$('#cbp-spmenu-s2').click(function() { 
    classie.something(); 
    // do stuff 
}); 

https://api.jquery.com/click/