New to LWC... trying to implement Google reCAPTCHA and am struggling to figure out how to call a function from connectedCallback

Question

I am brand new to LWC and am trying to implement Google reCAPTCHA V2 into our community. I used the following guide as a tutorial but am noticing issues with some of the code: https://www.learnexperiencecloud.com/s/article/Implementing-reCAPTCHA-in-Community-Cloud#LWCSupport

Anyways, everything is working except the ability to enable/disable a lightning button on successful verification. I believe this is just a simple issue with how I'm trying to implement. Basically a listener is added into the connectedCallback on the event the user clicked the reCAPTCHA checkbox. I am then firing off a POST call to the recaptcha/api/siteverify endpoint for an extra security measure. On successful response, I want to enable the lightning button. Below are the snippets of code. Everything is working except where I have the comments in capital letters. I have tried instead of calling this function to just set this.disableButton = false, but that doesn't work either (also commented out for now). The button remains disabled in both cases.

recaptchaLWC.html:

<template>
    <h2>reCAPTCHA V2</h2>
    <br/>
    <div class="recaptchaCheckbox"></div>
    <br/>
    <lightning-button label="Submit" disabled={disableButton}></lightning-button>
</template>

recaptchaLWC.js:

import { LightningElement, track, api, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import verifyRecaptcha from '@salesforce/apex/recaptchaLWCController.insertRecord';

export default class recaptchaLWC extends NavigationMixin(LightningElement) {
    disableButton = true;

    // Runs when component loads
    connectedCallback() {
        console.log('connectedCallback');
        document.addEventListener("grecaptchaVerified", function(e) {
            verifyRecaptcha({ record: null,
                recaptchaResponse: e.detail.response})
                .then(result => {
                    //this.disableButton = false; // THIS DOESN'T ENABLE THE BUTTON?
                    this.handleButton(); // WHY CAN'T I CALL THIS?
                    alert(result);
                })
                .catch(error => {
                    console.log('error');
                    console.log(this.error);
                });
        });
    }

    handleButton() {
        this.disableButton = false;
        console.log('handleButton');
    }

    renderedCallback() {
        var divElement = this.template.querySelector('div.recaptchaCheckbox');
        //valide values for badge: bottomright bottomleft inline
        var payload = {element: divElement, badge: 'bottomright'};
        document.dispatchEvent(new CustomEvent("grecaptchaRender", {"detail": payload}));
    }
}

I appreciate any support... thanks!

Answer 1

document.addEventListener("grecaptchaVerified", function(e) {

Should be:

document.addEventListener("grecaptchaVerified", (e) => {

When you use a normal function, this can become unpredictable. By using the arrow function (=>), this will be set to the appropriate object (your class).