Почему возникает ошибка Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id?

Question

[Сергей Мурин]

Привет, который раз мусолю тему с ReCAPTCHA. Мне наконец получилось вывести 2 ReCAPTCHA на разные формы но проблема в том что на главной странице index.php они показываются а если переходить на другую страницу там на формах их нет, и выскакивает эта ошибка
Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id
at recaptcha__ru.js:201:504
at onloadCallback (template_991324440596b2fb2dfbf81263ada07d_v1.js?1685483595306681:97:14). Я гуглил но те решения которые я находил они не помогли((
Вот код ReCAPTCHA, все id разные и они стоят в html

var onloadCallback = function () {
  let mysitekey = '*********';

  grecaptcha.render('recaptcha1', {
    'sitekey': 'mysitekey',
    'callback': onRecaptchaSuccess,
    'expired-callback': onRecaptchaExpired,
    'timeout': 120000
  });

  grecaptcha.render('recaptcha2', {
    'sitekey': 'mysitekey',
    'callback': onRecaptchaSuccess2,
    'expired-callback': onRecaptchaExpired,
    'timeout': 120000
  });
// вот этот id находится на другой странице recaptcha3
  grecaptcha.render('recaptcha3', {
    'sitekey': 'mysitekey',
    'callback': onRecaptchaSuccess3,
    'expired-callback': onRecaptchaExpired,
    'timeout': 120000,
  });
};

let isRecaptchaChecked = false; // Флаг для отслеживания отмеченности reCAPTCHA

function onRecaptchaSuccess(response) {
  // Действия при успешной проверке reCAPTCHA
  console.log('reCAPTCHA успешно пройдена1.');
  console.log('Ответ:', response);
  isRecaptchaChecked = true; // Устанавливаем флаг в true
}

function onRecaptchaSuccess2(response) {
  console.log('reCAPTCHA успешно пройдена2.');
  console.log('Ответ:', response);
  isRecaptchaChecked = true; // Устанавливаем флаг в true
}
 
function onRecaptchaSuccess3(response) {
  console.log('reCAPTCHA успешно пройдена3.');
  console.log('Ответ:', response);
  isRecaptchaChecked = true; // Устанавливаем флаг в true
}

function onRecaptchaExpired() {
  console.log('Срок действия reCAPTCHA истек.');
  isRecaptchaChecked = false; // Устанавливаем флаг в false
}

Answer 1

[Алексей Уколов]

У вас три страницы, на каждой из которых находится один из указанных id, а вы пытаетесь на каждой натравить Рекапчу на все три (двух из трёх на странице при этом нет), потому и получаете ошибку.
Либо подключайте на каждой странице свой скрипт только с одним id, который на ней присутствует, либо проверяйте элемент на существование:

if (document.getElementById('recaptcha1')) {
  grecaptcha.render('recaptcha1', {
    'sitekey': 'mysitekey',
    'callback': onRecaptchaSuccess,
    'expired-callback': onRecaptchaExpired,
    'timeout': 120000
  });
}

Comments

[Сергей Мурин]

Спасибо большое)) вы очень мне помогли