javascript - 我收到一个错误 Uncaught TypeError: Cannot set property 'onclick' of null
问题描述
我有一个 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 文档的末尾被隐含。
解决方案
错误在您的第一行:
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');
}
});
});
});
推荐阅读
- javascript - 在 React 中未定义 useContext()
- amazon-dynamodb - DynamoDB Stream 同时显示 INSERT 和 UPDATE 以插入新记录
- python - Python:换屏的简单函数
- java - 使用 jmx 和 java 获取 kafka mbeans
- r - 在 R 中绘制网络时调整 igraph mark.groups 多边形的曲率
- python - 计算 LSTM 模型的雅可比矩阵 - Python
- javascript - 使用 piexifjs 在 jpeg Exif 上添加/修改 gps 坐标
- dart - 如何获取标识符类型 dart-analyzer
- python - Python 和 VBA 之间的通信
- python - 如何将熊猫数据框多索引列移动到 2 行