复选框不能用javascript点击,.click()不是函数

x6yk4ghg  于 2023-06-04  发布在  Java
关注(0)|答案(2)|浏览(198)

我试过在谷歌浏览器中用JavaScript自动点击一个复选框。
这是当我检查复选框时浏览器的检查器显示的内容:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square" data-icon="Square" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>

这是我尝试点击按钮的方式:

document.getElementsByClassName('lucide lucide-square')[0].click();

它识别元素,但不点击它。
它返回错误:

VM3971:1 Uncaught TypeError: document.getElementsByClassName(...)[0].click is not a function
    at <anonymous>:1:60

有人能帮我吗?
我也试过.onclick或用querySelector调用元素,但不起作用。
我希望这个复选框能像同一个网站上的其他复选框一样工作,它们都可以用.click()点击

n3schb8v

n3schb8v1#

所以我贴出了@LouysPatriceBessette的答案,这对我很有效

document.getElementsByClassName('lucide lucide-square')[0].parentElement.click()
j8ag8udp

j8ag8udp2#

您尝试单击的元素实际上并不是一个按钮,它是一个<svg>元素,看起来像一个按钮,但实际上更像一个图像。只有真实的按钮才有.click()方法,但是你可以通过使用CustomEvent创建一个新事件并将其发送到按钮来人为地触发click事件:

const btn = document.getElementsByClassName('lucide lucide-square')[0];

// example event handler
btn.addEventListener('click', function() {
  console.log('clicked');
});

var event = new CustomEvent('click');
btn.dispatchEvent(event);
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square" data-icon="Square" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>

相关问题