I have a made a function that replaces a base64 string with the matching email address when clicking on some text.

This works, but for some reason I get this error: Uncaught TypeError: Cannot read properties of undefined (reading 'target').

JS

initEmails() {
    const emailToggles = document.querySelectorAll('.email');
    if (!emailToggles) {
        return;
    }

    emailToggles.forEach(toggle => {
        toggle.addEventListener('click', this.replaceEmail);
    });
}

replaceEmail(ev){
    const target = ev.target.closest('.email');

    if (!target.classList.contains('active')) {
        ev.preventDefault();
    }

    const email = atob(target.dataset.value);

    target.setAttribute('href', 'mailto:' + email);
    target.querySelector('.replace').innerText = email;

    target.classList.add('active');
}

HTML:

<span>
    <h5>@lang('E-mail')</h5>
    <a href="javascript:void(0);" data-value="{{ base64_encode($employee->email) }}" class="email">
        <span class="replace">Toon e-mailadres</span>
    </a>
</span>

I tried checking if .email exists before initialising the functions like this:

if (document.querySelector('.email') !== null) {
    this.initEmails();
    this.replaceEmail();
}

But the error keeps popping up in my console.

What can I do to fix it?