我正在尝试制作一个扩展版：它会提供一个弹出窗口并自动单击我的购物车，其中 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扩展程序运行
我收到的错误：
未捕获的类型错误： 无法读取 null 的属性"单击">
你的代码在加载#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>除了等待 DOM 加载并防止不必要的错误之外，请尝试：
var button = document.getElementById('clicker')
if (button) {
button.click();
}
感谢您的帮助，但是我已经使用了DOM元素来解决我的问题。
再次感谢。
干杯！！！