reCaptchs доступ к локальным переменным, которые содержат элемент DOM из функции обратного вызова data-callback - PullRequest
Новая
       6

reCaptchs доступ к локальным переменным, которые содержат элемент DOM из функции обратного вызова data-callback

0 голосов
/ 11 октября 2018

на моем сайте у меня есть компонент Google ReCaptcha, который позволяет мне указать функцию обратного вызова внутри атрибута «обратный вызов данных».

это мой HTML-файл: 

<html>
    <script src='https://www.google.com/recaptcha/api.js'></script>    
    <script type="text/javascript">

    var txtClientResponse = document.getElementById('txtClientResponse');
    var txtServerResponse = document.getElementById('txtServerResponse');

    function successCallback(value) {

        this.txtClientResponse.value = value;
        this.txtServerResponse.innerText.clear();

    }
</script>
<body>
    <div class="g-recaptcha" data-callback="successCallback" data-error-callback="errorCaptcha" data-sitekey="xxxxxx" />

    <input ID="txtClientResponse" />
    <input ID="txtServerResponse" />

</body>

Все прекрасно работает, за исключением того, что я не могу получить доступ к локальной переменной txtClientResponse, которая содержит элемент DOM, из функции обратного вызова "successCallback".к локальным переменным, таким как var test = 1, я могу получить доступ с помощью this.test.

Я пытался передать «this», используя то же самое, что и на Angular, но это не сработало.мне нужно чистое решение javascript - не угловое: 

<div class="g-recaptcha" data-callback="successCallback.bind(this)" data-error-callback="errorCaptcha" data-sitekey="xxxxxx"/>

1 Ответ

0 голосов
/ 11 октября 2018

Я долгое время не использовал чистый JavaScript, потому что я использую Angular, я забыл, что тег script с кодом javascript должен находиться в самом низу содержимого тега body или, по крайней мере, назначать переменные с помощью getElementByIdвнутри события document.onreadystatechange.

Проблема заключалась в том, что строки: 

var txtClientResponse = document.getElementById('txtClientResponse');
var txtServerResponse = document.getElementById('txtServerResponse');

выполнялись перед готовыми элементами HTML.

Вот исправление для пользователей, которыеможет найти этот вопрос с помощью Google 

<html>    
<body>
    <div class="g-recaptcha" data-callback="successCallback" data-error-callback="errorCaptcha" data-sitekey="xxxxxx" />

    <input ID="txtClientResponse" />
    <input ID="txtServerResponse" />

    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script type="text/javascript">

        var txtClientResponse = document.getElementById('txtClientResponse');
        var txtServerResponse = document.getElementById('txtServerResponse');

        function successCallback(value) {

            this.txtClientResponse.value = value;
            this.txtServerResponse.innerText.clear();

        }
    </script>

</body>
</html>
...