代码之家 › 专栏 › 技术社区 › Omtechguy

从数据回调函数中重述对保存DOM元素的局部变量的访问

recaptcha javascript

Omtechguy · 技术社区 · 6 年前

在我的站点中,我有google reCaptcha组件,它允许我在属性“data callback”中指定一个回调函数。

这是我的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>

除了无法从回调函数“successCallback”访问包含DOM元素的局部变量txtClientResponse之外,其他一切都很正常。对于像var test=1这样的局部变量,我可以使用this.test访问。

我试图通过“这个”使用像我做的角度,但它没有工作。我需要一个纯javascript解决方案-而不是角度:

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

1 回复 | 直到 6 年前

Omtechguy 6 年前

我很长时间没有使用纯JavaScript,因为我使用的是Angular,我忘记了带有JavaScript代码的script标记应该在body标记内容的最底部,或者至少在document.onreadystatechange事件中用getElementById分配变量。

问题是线路:

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前