Всем привет. Столкнулся с проблемой, которую не пойму, как решить.
Ситуация: на страница есть большая форма. У меня нет доступа к исходному коду формы и я не знаю, какие другие скрипты ею управляют. Я лишь могу сделать вставку своего кастомного кода внизу страницы.
Проблема: к форме каким-то скриптом добавляются кнопки "Назад" и "Далее", которые отвечают за переключение вопросов формы. Я хочу отследить клик по этим кнопкам, чтобы сделать нужные мне действия.
Пишу такой обработчик клика:
...
document.querySelector('div.btn-singly-controls > button.btn.btn-next.btn-success').style.display = 'none';
...
Путь к элементу 100% точен. Копирую из инспектора через меню Copy JS path.
А дальше странности.
Если перезагрузить страницу, дождаться полной загрузки, открыть консоль и выполнить код выше — ничего не произойдет. Хотя кнопка с этими классами уже есть в DOM, я вижу её на странице. Можно повторить выполнение кода 5-10-50 раз, ничего не произойдет.
Но если я открою инспектор, снова скопирую JS-путь к элементу и после этого выполню команду в консоли — элемент пропадёт.
В чём может быть прикол? Почему так происходит?
Думаю, по той же причине не работает мой код. Я отслеживаю клик по этой кнопке и триггер не срабатывает, как будто скрипт не видит этого элемента в DOM. Хотя он есть. Скрипт загружается последним, дожидаясь загрузки страницы, поэтому это вдвойне странно.
В качестве альтернативного решения — привязывал триггер к потере фокуса в поле ввода. Отслеживаю потерю фокуса поля и меняю цвет кнопки по тому же классу (из примера выше). Код работает! Но мне такое решение не подходит, нужно отследить именно клик по кнопке :(