An error while changing text with javascript

Question

I'm using google recaptcha with my django project. But it is not English. So I want to change its writing with javascript.

html

{% extends 'base.html' %}
{% block content %}
<div class="form-body">
    <div class="row">
        <div class="form-holder">
            <div class="form-content">
                <div class="form-items">
                    <h1>Registration</h1>
                    <br><br>
                    <form class="requires-validation" method="POST" novalidate>

                      {% csrf_token %}
                      {{form.as_p}}
                        <div class="form-button">
                            <button id="submit" type="submit" class="btn btn-primary">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  document.querySelector('#recaptcha-anchor-label').innerHTML = "I'm not a robot";

</script>

{% endblock %}

After I did that it won't apply the html in browser. Below the error message:

Cannot set properties of null (setting 'innerHTML')

(recaptcha-achor-label is an id)

The problem is because the `#recaptcha-anchor-label` element is dynamically loaded in to the DOM after the ContentLoaded event has fired. This means you're trying to set the `innerHTML` of an element that doesn't exist. To fix this you need to amend your logic to execute that line of code after the CAPTCHA has loaded - either via any callbacks/events the library exposes to you, or more crudely, a `setTimeout()`. — Rory McCrossan, May 27 '22 at 07:48

uminder · Accepted Answer · 2022-05-27T07:38:20.603

0

The problem is, that no element can be found by the following statement.

document.querySelector('recaptcha-anchor-label')

In case recaptcha-anchor-label is an id, you should use a # in front of it.

document.querySelector('#recaptcha-anchor-label')

see Document.querySelector()

edited May 27 '22 at 07:38

answered May 27 '22 at 06:52

uminder

23,831
5
37
72

Its an Id but when I do that: document.querySelector('.recaptcha-anchor-label').innerHTML = "I'm not a robot"; its not working – Ahmet Yılmaz May 27 '22 at 07:32
I changed my answer to show how to select an element by `id` – uminder May 27 '22 at 07:38

score 0 · Answer 2 · edited May 27 '22 at 10:58

0

This problem should be caused by 'recaptcha-anchor-label', please check whether 'recaptcha-anchor-label' is “class” or “id”, if it is class, please add “.“ before it. If it is class, please add "#" before it.

eg:

document.querySelector('.recaptcha-anchor-label').innerHTML = "I'm not a robot";

or

document.querySelector('#recaptcha-anchor-label').innerHTML = "I'm not a robot";

edited May 27 '22 at 10:58

Tyler2P

2,324
26
22
31

answered May 27 '22 at 07:04

Lincoln Xu

1
1

Its an Id but when I do that: document.querySelector('.recaptcha-anchor-label').innerHTML = "I'm not a robot"; its not working – Ahmet Yılmaz May 27 '22 at 07:30

score -1 · Answer 3 · answered May 27 '22 at 06:55

If you are still facing the error. So Try this out The browser always loads the entire HTML DOM from top to bottom. Any JavaScript code written inside the script tags (present in head section of your HTML file) gets executed by the browser rendering engine even before your whole DOM (various HTML element tags present within body tag) is loaded. The scripts present in head tag are trying to access an element having id hello even before it has actually been rendered in the DOM. So obviously, JavaScript failed to see the element and hence you end up seeing the null reference error.

So move the script tag after all the DOM elements i.e. at the bottom where body tag is ending.

Cannot set property 'innerHTML' of null

An error while changing text with javascript

3 Answers3