我收到一个错误 Uncaught TypeError: Cannot set property 'onclick' of null答案

【问题标题】：I get an error Uncaught TypeError: Cannot set property 'onclick' of null我收到一个错误 Uncaught TypeError: Cannot set property 'onclick' of null
【发布时间】：2019-03-24 07:04:33
【问题描述】：

我有一个 facebook 自定义按钮分享代码。我收到此错误：

未捕获的类型错误：无法在控制台中设置属性“onclick”为 null。

    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');

        }
    });
}

脚本在 html 文档的末尾被隐含。

【问题讨论】：

标签： javascript css html

【解决方案1】：

错误在你的第一行：

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');

          }
      });
    });
});

【讨论】：

document.querySelectorAll('piggy-bank-fb-shear-btn', 'piggy-bank-fb-shear-btn-2').onclick = function ()
您是否正在处理您现在获得按钮列表而不是单个按钮的事实？请参阅此示例：jsfiddle.net/pyfw7td0/1

【解决方案2】：

您可以立即使用document.getElementById 获取单个元素。因此，您可以将元素的 id 保留在数组中并将事件侦听器附加到它

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

【讨论】：

【解决方案3】：

var clickfnc = function() {

}

document.getElementById('piggy-bank-fb-shear-btn').onclick =clickfnc 
document.getElementById('piggy-bank-fb-shear-btn-2').onclick =clickfnc

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation would greatly improve its long-term value 通过展示为什么这是一个很好的解决问题的方法，并将使其对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案4】：

document.getElementById只有一个参数，你需要在你的代码中改变这个：

document.getElementById('piggy-bank-fb-shear-btn').onclick = function;
document.getElementById('piggy-bank-fb-shear-btn-2').onclick = function;


// Maybe you will prefer to use Jquery which you can use:

$('#piggy-bank-fb-shear-btn, #piggy-bank-fb-shear-btn-2').on('click', function() {});

【讨论】：

【解决方案5】：

getElementById() 只支持一个参数，所以你只能取回一个元素。

所以要么你像这样一个一个地获取你的元素：

document.getElementById('piggy-bank-fb-shear-btn').onclick = function() { // stuff }
document.getElementById('piggy-bank-fb-shear-btn-2').onclick = function() { // stuff }

或者您通过querySelectorAll() 执行此操作，它支持多个参数。

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

但是现在您不能只在查询末尾添加onclick，因为querySelectorAll() 返回了多个元素，即所谓的NodeList。因此，您将需要遍历名为 elements 的集合：

for (var i = 0; i < elements.length; i++) {
  elements[i].onclick = function() { // stuff }
}

【讨论】：