chrome插件的js中使用document.getElementById(‘save‘)获取不到元素

桃扇骨 2023-10-04 20:21 54阅读 0赞

原因：如果你使用的是立即执行函数，则有可能就是页面还没加载完，就执行了js代码，所以获取不到Uncaught TypeError: Cannot set properties of null (setting ‘onclick’)

2315bb3d0cee45cbaa5497073eea8b5f.png

解决办法：

1.把js代码放到文档最后加载

至少放在需要获取的元素之后：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>使用Store</title>
  8.   <link rel="stylesheet" href="static/css/popup.css"></link>
  9. </head>
  10. <body class="main">
  11.   <h2>总金额：<span id="money">0</span></h2>
  12.   <div>
  13.     <span>请输入消费金额:</span><input type="text"> <button id="save">存储</button>
  14.   </div>
  15.   // 放文档最后
  16.   <script src="static/js/popup.js"></script>
  17. </body>
  18. </html>

faf083951bda45528c1130b12715625d.png

2.使用defer属性

其实就是简单的利用defer属性，让浏览器读JS脚本的时候完全不等脚本开始读就开始读下面的图片啊，html代码了。然后让js脚本自己在那里慢慢读取完以后再执行。

给外链的js脚本添加defer=”true”，像下面这个这样就可以了：

发表评论

表情：
评论列表 （有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Chrome 灵魂插件

    文章开头先做个小调查，大家都用的什么浏览器？ 不看结果盲测一下，肯定是 Chrome 遥遥领先，特别是在程序员这个群体里面应该占比更高。 我使用谷歌浏览器也近10年了

    你的名字你的名字/ 0 赞/ 446 阅读

    相关 Chrome插件

    Chrome在全世界能够如此受欢迎，除了它的稳定性强，速度快这些优点外，还有就是它的插件是非常丰富强大的！最重要的是作为一个程序员，如果不使用Chrome的话你还谈什么是程序员

    柔光的暖阳◎柔光的暖阳◎/ 0 赞/ 436 阅读