Question

我正在尝试创建扩展名chrome：它会弹出并自动点击我的购物车，其中ID由我从inspect元素中设置。

尽管我无法编写代码来设置网站上特定类元素的ID（使用Chrome扩展程序的任何网站）

当我通过inspect元素手动设置该元素的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扩展程序运行该脚本，

我收到的错误：

未捕获的TypeError：无法读取null的属性“ click”

Answer 1

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

要解决此问题，请用函数包装代码，然后通过jQuery()或DOMContentLoaded event进行调用：

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加载并防止不必要的错误外，请尝试：

import math
x = int(input("Enter a number"))
x = math.sqrt(x)
print(x)

Answer 3

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

再次感谢。

干杯!!!

未被捕获的TypeError：无法读取null Chrome扩展程序的属性“ click”

3 个答案: