Question

我在函数中使用以下JS代码注销Chrome上的网站：

var docLogout = document.querySelector('.submit.logout');
docLogout.click();

我收到错误消息：

'Uncaught TypeError: Cannot read property 'click' of undefined'

这是因为我需要确保按钮的类首先存在，然后按照我认为的以下步骤进行操作：

使用“选择页面中的元素进行检查”按钮（开发人员工具最左侧的第一个按钮）
单击注销按钮进行检查
“宝石”标签打开
“元素”字段突出显示<button type="submit" class="submit logout">Log out</button>行
然后我单击“控制台”选项卡
再次粘贴我的代码，它就会起作用（此后同一页面上的任何按钮都将起作用）

如何避免通过上述步骤先了解元素的手动步骤？当网站加载其他页面时，是否有一种方法可以首先扩展所有DOM元素，以避免出现“无法读取未定义属性'单击'的未定义'”错误，而无需任何人为干预就首先使用“检查元素”按钮的情况？

注意：至少要说明已完成的投票，以便我与您互动！！！！！

Answer 1

docLogout是undefined，这意味着文档中没有类submit和logout 的元素

如果可以手动检查页面并找到<button class="submit logout">，则代码可能是在<button>附加到DOM之前运行的。

解决方案：确保在DOM附加了<button>后，代码正在运行。

一种执行此操作的方法是将<script>放在</body>结束标记之前，例如

<!doctype html>
<html>
  <head></head>
  <body>
    <button class="submit logout">Logout</button>
    <script>
      /* button is attached to the DOM at this point */
      const docLogout = document.querySelector('.submit.logout')
      docLogout.click()
    <script>
  </body>
</html>

另一种解决方案是在window的{{1}}事件之后运行代码，例如，

load

如果可能的话，我建议给按钮一个window.addEventListener('load', () => { document.querySelector('.submit.logout').click() })并使用id

Answer 2

似乎您没有正确使用选择器。您可以将中断放在此行上，检查为什么它为null / undefined 使用f12转到源代码并搜索js文件，然后在此给定行上放置断点以对其进行调试。

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

2 个答案: