addEventListener not working on SharePoint list form load


I have a SharePoint list form and I prepopulated certain fields with sharepont user properites. I also decided to use DOM development for form manipulation on the list form. Using the DOM, I was able to successfully disable certain form elements. I also have a checkbox at the beginning of the form that is supposed to hide certain fields when checked. For some reason, my eventlistener on the checkbox isn’t working like it should.

In the developer tool when looking at the SharePoint list form, I get the following error: ‘Unable to get property ‘addEventListener’ of undefined or null reference
The error points to this line:
document.querySelector('input(title="anonymous")').addEventListener('click',getProperties);

(function(){
  getProperties();
})();

document.querySelector('input(title="anonymous")').addEventListener('click',getProperties);

function getProperties(){
        var web = _spPageContextInfo.webAbsoluteUrl;
        var endPointUrl = web + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties";

        axios.get(endPointUrl).then(function(response) {
            var properties = response.data.UserProfileProperties;
            var displayName = response.data.DisplayName;
            var nameAry = displayName.split(" ");
            if (document.querySelector('input(title="Anonymous")') == false) {
                alert("Anonymous Code");
            }

            var fName = document.querySelector('input(title="First Name")');
            fName.value = nameAry(1);
            fName.disabled = true;

            var lName = document.querySelector('input(title="Last Name")')
            lName.value = nameAry(0);
            lName.disabled = true;

            var eMail = document.querySelector('input(title="Email Address")');
            eMail.value = response.data.Email;
            eMail.disabled = true;
            for (var i = 0; i < properties.length; i++) {
                //Office Phone Number
                if (properties(i).Key == "Office") {
                    var oSymbold = document.querySelector('input(title="Office Symbol")')
                    oSymbold.value = properties(i).Value;
                    oSymbold.disabled = true;
                }
            }
        });
        }

Here’s the weird part, I’m able to run the same exact code(slight modifications) in codepen but reading from typicode/json instead of a SharePoint list and it works perfectly. Here’s the codepen

Any idea why it’s not working in SharePoint?

Any assistance you can provide would be much appreciated. I’ve been tackling this for two days.