Блог

Главная - Вопросы по программированию - Неперехваченная ошибка типа: не удается прочитать свойство ‘click’ неопределенного

Неперехваченная ошибка типа: не удается прочитать свойство ‘click’ неопределенного

#javascript #google-chrome

#javascript #google-chrome

Вопрос:

Я использую следующий JS-код в функции для выхода из веб-сайта в Chrome:

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

Я получаю сообщение об ошибке:

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

Это потому, что мне нужно сначала убедиться, что класс кнопки существует, и я делаю это с помощью следующих шагов, которые я выяснил:

  • Используйте кнопку «выбрать элемент на странице, чтобы проверить его» (первая кнопка в крайнем левом углу инструментов разработчика)

  • Нажмите на кнопку выхода, чтобы проверить ее

  • Откроется вкладка Elemets
  • Поле Elements выделяет строку <button type="submit" class="submit logout">Log out</button>
  • Затем я нажимаю на вкладку консоли
  • Вставьте мой код снова, и он заработает (после этого будет работать любая кнопка на той же странице)

Как я могу избежать этого ручного шага, чтобы сначала сделать элементы известными с помощью описанных выше шагов? есть ли способ развернуть все элементы DOM изначально, когда веб-сайт загружает другую страницу, чтобы избежать ошибки «Не удается прочитать свойство «щелчок» неопределенного»» без какого-либо взаимодействия с человеком, сначала используя кнопку «Проверить элементы»?

ПРИМЕЧАНИЕ: по крайней мере, объясните, что сделано, чтобы я мог вас привлечь!!!!!!

Комментарии:

1. вы неправильно написали (‘.submit.logut’); разве это не должно быть .logout?

2. @Icewine Я исправил ошибку (я вводил вручную), но вопрос все еще остается в силе

3. Вы пробовали переносить свой код в DOMContentLoaded прослушиватель?

4. нет, я этого не сделал, более того, если у меня есть 2 кнопки на одной странице, то есть одна кнопка для выхода из системы, а другая для выбора другой вкладки, код для нажатия кнопки будет работать только для проверенной мной кнопки, если я проверю кнопку A, я могу нажать кнопку A с помощью JS иполучит ошибку, если попытается нажать кнопку B, если я проверю кнопку B JS, он нажмет кнопку B и выдаст ошибку, если попытается нажать кнопку A, однако, если кнопки B C D имеют один и тот же тип (пример выбора разных вкладок), все они будут работать, если я проверю только одну изих..

Ответ №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 load события ‘s, например,

 window.addEventListener('load', () => {
  document.querySelector('.submit.logout').click()
})

Если возможно, я бы рекомендовал присвоить кнопке id и использовать document.getElementById

Ответ №2:

кажется, вы неправильно используете селектор. вы можете поместить разрыв в эту строку, проверить, почему он становится нулевым / неопределенным, использовать f12 и перейти к источнику, выполнить поиск в файле js и поставить точку останова в этой строке give для ее отладки.