开发者问题收集

我收到错误 Uncaught TypeError: Cannot set property 'onclick' of null

2018-10-19
1010

我有一个 Facebook 自定义按钮共享代码。我收到此错误:

Uncaught TypeError: Cannot set property 'onclick' of null in console.

    document.getElementById('piggy-bank-fb-shear-btn', 'piggy-bank-fb-shear-btn-2').onclick = function () {
    FB.ui({
        method: 'share',
        display: 'popup',
        app_id: '{827182594132839}',
        href: window.fbSheareUrl,
    }, function (response) {
        debugger;
        if (response && !response.error_message) {
            var element = document.getElementById("attach-email");
            element.style.display = "block";
            document.getElementById('close','close2').click();
        }
        else {
            var element = document.getElementById("attach-email");
            document.getElementById('close', 'close2').click();
            element.style.display = "block";
            document.getElementById('share-poup-text').innerHTML = getLanguageWordByKey('PiggyBankShareUnsuccessfulPopUp');
            element.classList.remove("mystyle");
            document.getElementById('piggy-share-icon').classList.remove('email-success');
            document.getElementById('piggy-share-icon').classList.add('email-failed');

        }
    });
}

scrtipt 在 html 文档末尾实现。

3个回答

错误出现在第一行:

document.getElementById('piggy-bank-fb-shear-btn', 'piggy-bank-fb-shear-btn-2')

document.getElementById() 每次仅支持一个 ID。

如果您想定位多个 ID,请使用 document.querySelectorAll() ,它将返回具有指定 ID 的节点列表:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

或者,如果可能的话,您还可以向元素添加一个通用类,并使用 document.getElementsByClassName() 定位该类,它将返回具有该类的节点列表类:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

例如:

var buttons = document.querySelectorAll('#piggy-bank-fb-shear-btn, #piggy-bank-fb-shear-btn-2');

Array.from(buttons).forEach(button => {
    button.addEventListener('click', function(event) {
         FB.ui({
          method: 'share',
          display: 'popup',
          app_id: '{827182594132839}',
          href: window.fbSheareUrl,
      }, function (response) {
          debugger;
          if (response && !response.error_message) {
              var element = document.getElementById("attach-email");
              element.style.display = "block";
              document.getElementById('close','close2').click();
          }
          else {
              var element = document.getElementById("attach-email");
              document.getElementById('close', 'close2').click();
              element.style.display = "block";
              document.getElementById('share-poup-text').innerHTML = getLanguageWordByKey('PiggyBankShareUnsuccessfulPopUp');
              element.classList.remove("mystyle");
              document.getElementById('piggy-share-icon').classList.remove('email-success');
              document.getElementById('piggy-share-icon').classList.add('email-failed');

          }
      });
    });
});
Rence
2018-10-19

您可以使用 document.getElementById 一次性获取单个元素。因此,您可以将元素的 id 保存在数组中,并将事件侦听器附加到该数组中

['piggy-bank-fb-shear-btn', 'piggy-bank-fb-shear-btn-2'].forEach(function(item){
 document.getElementById(item).onclick==//rest of code
})
brk
2018-10-19
var clickfnc = function() {

}

document.getElementById('piggy-bank-fb-shear-btn').onclick =clickfnc 
document.getElementById('piggy-bank-fb-shear-btn-2').onclick =clickfnc 
hossein sedighian
2018-10-19