EventListener not being removed

I’ve got some Javascript that works fine on the first load, but isn’t working on Postback. After doing some reading, it seems like I need to remove the EventListeners and rebind them. So I’ve got the following code. On first load, the alerts triggered are:

• Add_Load
• PageLoadStuff Start
• PageLoadStuff Vars
• PageLoadStuff Complete
• PageLoadStuff Start
• PageLoadStuff Vars
• PageLoadStuff Complete

I type in my textbox and the counters count down as expected. I click a button which triggers a postback. After that, my alerts are:

• It’s a Postback!
• null

And the counters stop functioning completely. This is not inside an Update Panel. My assumption is that I remove the EventListeners and then add them back by running the PageLoadStuff function again, but I’m not even sure if that’s right.

Here’s my script:

<script type="text/javascript">

    function PageLoadStuff() {
        alert("PageLoadStuff Start");
        const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
        const label1 = document.getElementById('Label_Answer_Char_Count');
        const label2 = document.getElementById('Label_Answer_Char_Count2');
        const labelRemaining1 = document.getElementById('Label_Answer_Char_Remaining');
        const labelRemaining2 = document.getElementById('Label_Answer_Char_Remaining2');
        alert("PageLoadStuff Vars");

        // Add input event listener for text area
        textArea2.addEventListener('input', IncrementCounters);

        function IncrementCounters() {
            textCounter(textArea2, 3000, label1, labelRemaining1);
            textCounter2(textArea2, 865, label2, labelRemaining2);
            //        alert("Event Listener - DOMContentLoaded");
        }
        alert("PageLoadStuff Complete");
    }

    var isPostBack = '<%= this.IsPostBack%>' == 'True';
    if (isPostBack) {
        alert("It's a PostBack!");
        const textArea2 = document.getElementById('TextBox_Follow_Up_Answer2');
        alert(textArea2);
        document.removeEventListener('DOMContentLoaded', PageLoadStuff);
        textArea2.removeEventListener('input', IncrementCounters);
        alert("EventListeners Removed");
        PageLoadStuff();

    }

    if (document.readyState == 'loading') {
        // still loading, wait for the event
        document.addEventListener('DOMContentLoaded', PageLoadStuff);
    } else {
        PageLoadStuff();
    }

    Sys.Application.add_load(function () {
        alert("Add_Load");
        PageLoadStuff();
    });

    function textCounter(field, maxlimit, label, label2) {
        if (field.value.length > maxlimit)
            field.value = field.value.substring(0, maxlimit);
        else {

            label.innerHTML = maxlimit - field.value.length;
        }
        if (field.value.length > maxlimit - 500) {
            label.style.color = "#FF0000";
            label2.style.color = "#FF0000";
        }
        else {
            label.style.color = "#000000";
            label2.style.color = "#000000";
        }
    //    alert("textCounter Fired");
    }

    function textCounter2(field, maxlimit, label, label2) {
        if (field.value.length > maxlimit)
        field.value = field.value;
        else {

            label.innerHTML = maxlimit - field.value.length;
        }
        if (field.value.length > maxlimit - 200) {
            label.style.color = "#FF0000";
            label2.style.color = "#FF0000";
        }
        else {
            label.style.color = "#000000";
            label2.style.color = "#000000";
        }
    //    alert("textCounter2 Fired");
    }

</script>