Функция Javascript .click() не работает

Я попробовал и заметил, при каких условиях это происходит. Ошибка выдается только в том случае, если вы вводите значение программно и затем нажимаете «Отправить».

Проблема не в том, что кнопка «Отправить» не работает, проблема в том, что вы вводите адрес электронной почты в поле ввода. Электронная почта вводится в поле, но базовый JavaScript, вероятно, не запускается из-за установки значения через скрипт. Щелчок по текстовому полю вручную, а затем запуск функции щелчка работает.

Я заметил, что JavaScript, который устанавливает адрес электронной почты, введенный в поле ввода, запускается, когда вы щелкаете за пределами поля ввода. Это наводит меня на мысль, что это прослушиватель событий, который устанавливает переменную в JavaScript, и эта переменная — это то, что отправляется на сервер, а не входные данные напрямую из поля.

Чтобы обойти эту проблему, мы сначала проведем небольшой обратный инжиниринг и посмотрим, как это работает. К счастью, JavaScript очень прост, и мы можем легко увидеть все прослушиватели событий, используя удобные инструменты разработчика в нашем браузере, такие как Firefox:

и Хром:

Все, что нам нужно сделать, это попытаться отправить некоторые из этих событий и посмотреть, какие из них эффективны.

Чтобы определить, сработало ли событие, которое я отправлял, я сначала отправил событие щелчка на следующую кнопку, чтобы она показывала ошибку, по сути делая именно то, что вы сделали, чтобы намеренно добиться сбоя, и пытался отправлять события в поле ввода, пока ошибка не исчезла. поскольку нажатие вручную рядом с полем ввода также привело к исчезновению ошибки, что указывает на то, что значение JavaScript для поля ввода было обновлено через прослушиватель событий.

Поскольку мы знаем, что JavaScript запускается, когда что-то происходит с полем ввода, мы можем начать с предположения, что поле ввода имеет прослушиватель событий, который Сначала я попробовал отправить события фокусировки и размытия. Это не сработало, поэтому я попробовал выбрать, что тоже не сработало. Затем я попробовал событие изменения и успех!

Вот код JavaScript, который я написал для этого:

{
  const event = new Event("change");
  document.forms[0][0].value = "[email protected]";
  document.forms[0][0].dispatchEvent(event);
  document.forms[0][3].click();
}

Обратите внимание, что я поместил его в блок, просто чтобы настроить область действия, чтобы избежать повторного объявления этой переменной события, поскольку потенциально может потребоваться вставить этот сценарий в консоль несколько раз.

Простыми словами, вот что мы делаем:

1. Создайте новый объект Event (используя конструктор Event, поскольку createEvent устарел).
2. Инициализируйте наше событие как тип «изменение».
3. Установите значение так, как вы пробовали изначально.
4. Отправьте событие «change» в поле ввода, чтобы заставить JavaScript принять значение поля ввода и сохранить его в своей переменной.
5. Нажмите следующую кнопку.

Еще одно улучшение, которое следует сделать, — это избегать повторения подобных слов:

{
  const email = "[email protected]"; // We separate this to make modifying easier.

  const form = document.forms[0];
  form[0].value = email;
  form[0].dispatchEvent(new Event("change"));
  form[3].click();
}

Если у вас есть какие-либо другие проблемы или вопросы, связанные с изучением JavaScript, вы всегда можете обратиться за помощью! Если какой-либо из моих шагов неясен, вы можете сообщить мне, я пытаюсь немного объяснить мыслительный процесс, чтобы вы могли научиться использовать доступные инструменты для устранения проблем, с которыми вы сталкиваетесь, чтобы вы не только получили решение, но и поняли откуда пришло это решение.