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(){
        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.

2 Answers 2


Try to delay the code to run after DOM ready, if the control not renders yet, the script may not find it.



SP.SOD.executeOrDelayUntilScriptLoaded(CustomJS, 'sp.js');
        function CustomJS() {
  • None of those options worked. I think SharePoint is blocking the listener from being added. Not sure why. When I ran the below, the alert worked but not the listener. very strange. SP.SOD.executeOrDelayUntilScriptLoaded(CustomJS, 'sp.js'); function CustomJS() { alert("In Listener"); document.querySelector('input[title="anonymous"]').addEventListener('click',getProperties); }
    – OLA
    Commented Jul 8, 2020 at 11:38

Once I waited for the html to finish loading, I added the click event and that made all the difference.

  window.addEventListener("load", function() {    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.