Question

未捕获的类型错误：无法读取 null Chrome 扩展程序的属性“click”

2019-10-03

2537

javascript jquery google-chrome-extension

我正在尝试制作一个 chrome 扩展程序：它会弹出一个窗口并自动点击我的购物车，其中 id 是由我从检查元素中设置的。

虽然我无法编写代码来将 id 设置为网站上的特定类元素（任何借助 Chrome 扩展程序的网站）

当我通过检查元素手动设置该元素的 id 后运行此代码时会发生什么：

我尝试过各种方法，例如 document.getElementByid().click();

也尝试过变量方法，但都不起作用

   jQuery.noConflict();
    {
        var my_text=prompt('Enter Your Tickets ');
        addclick(my_text);

    }

    function addclick(v){
        var button;
        for (i = 1; i <= v; i++) {
            //document.getElementById('clicker').click();
            button = document.getElementById('clicker')
                button.click();
                alert(i);


        }
    }

如果您尝试从控制台运行这些脚本，它们会完美运行，但即使设置了所有权限，也无法从 Chrome 扩展程序运行

我收到的错误：

Uncaught TypeError: Cannot read property 'click' of null

Answer 1

您的代码在 #clicker 元素加载之前运行（因为它位于其上方）；因此，该元素此时 不存在 ， document.getElementById 返回 null ，因此出现错误。

要解决此问题，请用函数包装您的代码，然后通过 jQuery() 或 DOMContentLoaded 调用它事件 :

jQuery.noConflict();
jQuery(()=>{
    var my_text=prompt('Enter Your Tickets ');
    addclick(my_text);
})

function addclick(v){
    var button;
    for (i = 1; i <= v; i++) {
        //document.getElementById('clicker').click();
        button = document.getElementById('clicker')
        button.click();
        alert(i);
    }
}

或者：

jQuery.noConflict();
document.addEventListener('DOMContentLoaded',()=>{
    var my_text=prompt('Enter Your Tickets ');
    addclick(my_text);
})

function addclick(v){
    var button;
    for (i = 1; i <= v; i++) {
        //document.getElementById('clicker').click();
        button = document.getElementById('clicker')
        button.click();
        alert(i);
    }
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    jQuery(() => {
      jQuery('.btn-pls').attr('id', 'clicker'); {
        var my_text = prompt('Enter Your Tickets ');
        addclick(my_text);

      }
    })

    function addclick(v) {
      for (i = 1; i <= v; i++) {
        //document.getElementById('clicker').click();
        var button = document.getElementById('clicker');
        button.click();
        alert(i);
      }
    }
  </script>
  <style>
    .cart-item-btns .v-button {
      float: right;
      height: 40px;
      margin: 2px;
      min-width: 75px;
      font-size: 22px;
    }
    
    .cart-item-main {
      padding: 8px;
    }
    
    .catalog-item.selected {
      background-color: #fecc00;
      cursor: default;
    }
    
    .catalog-item {
      position: relative;
      cursor: pointer;
      height: 40px;
      overflow: hidden;
    }
    
    .catalog-item.selected {
      background-color: #fecc00;
      cursor: default;
    }
    
    .cart-item:last-child {
      border-bottom: none;
    }
  </style>
</head>

<body>
  <div>Chrome Extension By Love Chauhan</div><br/>
  <div class="cart-item-btns">
    <div class="v-button btn-qty hl-green"><i class="fa fa-hashtag"></i></div>
    <div class="v-button btn-pls hl-green"><i class="fa fa-plus" id="clicker"></i></div>
    <div class="v-button btn-min hl-green disabled"><i class="fa fa-minus"></i></div>
    <div class="v-button btn-del hl-red"><i class="fa fa-trash"></i></div>
    <div class="v-button btn-seat hl-green disabled v-hidden" title="limited capacity 40 new - VisitaSingoli
"></div>
  </div>
</body>

</html>

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      jQuery('.btn-pls').attr('id', 'clicker'); {
        var my_text = prompt('Enter Your Tickets ');
        addclick(my_text);

      }
    })

    function addclick(v) {
      for (i = 1; i <= v; i++) {
        //document.getElementById('clicker').click();
        var button = document.getElementById('clicker');
        button.click();
        alert(i);
      }
    }
  </script>
  <style>
    .cart-item-btns .v-button {
      float: right;
      height: 40px;
      margin: 2px;
      min-width: 75px;
      font-size: 22px;
    }
    
    .cart-item-main {
      padding: 8px;
    }
    
    .catalog-item.selected {
      background-color: #fecc00;
      cursor: default;
    }
    
    .catalog-item {
      position: relative;
      cursor: pointer;
      height: 40px;
      overflow: hidden;
    }
    
    .catalog-item.selected {
      background-color: #fecc00;
      cursor: default;
    }
    
    .cart-item:last-child {
      border-bottom: none;
    }
  </style>
</head>

<body>
  <div>Chrome Extension By Love Chauhan</div><br/>
  <div class="cart-item-btns">
    <div class="v-button btn-qty hl-green"><i class="fa fa-hashtag"></i></div>
    <div class="v-button btn-pls hl-green"><i class="fa fa-plus" id="clicker"></i></div>
    <div class="v-button btn-min hl-green disabled"><i class="fa fa-minus"></i></div>
    <div class="v-button btn-del hl-red"><i class="fa fa-trash"></i></div>
    <div class="v-button btn-seat hl-green disabled v-hidden" title="limited capacity 40 new - VisitaSingoli
"></div>
  </div>
</body>

</html>

Answer 2

除了等待 DOM 加载并防止不必要的错误，请尝试：

var button = document.getElementById('clicker')
if (button) {
    button.click();
}

Answer 3

谢谢您的帮助，但我已经使用 DOM 元素解决了我的问题。

再次感谢。

干杯！！！

Love Chauhan

2019-10-07