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

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

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

![2315bb3d0cee45cbaa5497073eea8b5f.png][]

### 解决办法： ###

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

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

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

![faf083951bda45528c1130b12715625d.png][]

#### 2.使用defer属性 ####

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

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

特别是比较大的脚本，提高整个网页的载入速度是非常明显的。

![75f4d0232be242a5aa368d2a15f9f96c.png][]

#### 3.在js代码中使用DOMContentLoaded事件 ####

// 监听页面加载完之后才执行
    document.addEventListener('DOMContentLoaded', function () {
      (function () {
        console.log('立即执行函数');
        var btn = document.getElementById("save");
        console.log('btn----', document);
        const save = document.getElementById('save')
        console.log('save----', save);
        save.onclick = function () {
          console.log('存储数据');
          chrome.storage.sync.get("total", function (res) {
            var totalAmount = 0;
            if (res.total) {
              totalAmount = parseFloat(res.total)
            }
          })
        }
      })()
    });

以上三种方式亲测，都可以

[2315bb3d0cee45cbaa5497073eea8b5f.png]: https://img-blog.csdnimg.cn/2315bb3d0cee45cbaa5497073eea8b5f.png
[faf083951bda45528c1130b12715625d.png]: https://img-blog.csdnimg.cn/faf083951bda45528c1130b12715625d.png
[75f4d0232be242a5aa368d2a15f9f96c.png]: https://img-blog.csdnimg.cn/75f4d0232be242a5aa368d2a15f9f96c.png