如何修复“未捕获的类型错误：无法读取 null 的属性‘点击’”答案

【问题标题】：How to fix "Uncaught TypeError: Cannot read property 'click' of null"如何修复“未捕获的类型错误：无法读取 null 的属性‘点击’”
【发布时间】：2019-05-13 03:51:57
【问题描述】：

我正在开发 Chrome 扩展程序并收到错误“未捕获的类型错误：无法读取属性 'click' of null”。它在控制台中工作，我确保关闭控制台。我正在尝试在下面的网站上运行它。

https://realtime.demo.sonicwall.com/main.html

popup.js

document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', int);      
});
function int() {
    var source = document.getElementById('j1_64_anchor').click;
}
var coll = document.getElementsByClassName("collapsible");
var i;

popup.html

<body>
<button class="collapsible">Interfaces</button>
<div class="content">
<button onclick="int()" class="collapsible">Interfaces</button>
</div>
</body>

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

在您的html 中没有id 为j1_64_anchor 的元素。所以你的代码document.getElementById('j1_64_anchor').click(); 会失败。

document.addEventListener('DOMContentLoaded', function () {
    
    document.querySelector('button').addEventListener('click', int)
});
  
function int() {
    console.log('calling');
    var source = document.getElementById('j1_64_anchor').click();
}

var coll = document.getElementsByClassName("collapsible");
var i;

<button class="collapsible">Interfaces</button>
<div class="content" id="j1_64_anchor">
<button onclick="int()" class="collapsible">Interfaces</button>
</div>

【讨论】：

那行得通，但我是 Javascript 新手，无论如何我可以为我正在使用的当前网站而不是 HTML 提取元素，也许将它作为 Iframe 导入？这就是我想要做的。
感谢你们，我知道版主希望我们使用这个来寻求帮助，但不是在项目上工作，所以我可以研究这个并找出答案。感谢大家的帮助。

【解决方案2】：

好像是这行代码

function int() {
    var source = document.getElementById('j1_64_anchor').click;
}

在 dom 准备好之前被执行。尝试将其放入 DOMContentLoaded 事件中

document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', int);   
function int() {
    var source = document.getElementById('j1_64_anchor').click;
}
var coll = document.getElementsByClassName("collapsible");
var i;   
});

【讨论】：