Spfx extension : Uncaught TypeError: Cannot set property 'innerText' of undefined

Question

I am trying to change Save button name to Submit using below code but it does not work sometimes if I do load page twice below script throw error.

My Script having JS is added in my Site Assets library and below is code in application customizer to load JS.

Code in extension:

 const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
    
 let articleRedirectScriptTag: HTMLScriptElement = document.createElement("script");
 let jsurl = `${this.context.pageContext.web.serverRelativeUrl}/SiteAssets/MyScript.js`;
 articleRedirectScriptTag.src = jsurl;
 articleRedirectScriptTag.type = "text/javascript";
 head.insertAdjacentElement("beforeEnd", articleRedirectScriptTag);
    
 console.log('jsurl:',jsurl);
      

Code in MyScript.js:

what();
function what(){
     document.getElementsByClassName("ms-Button--primary")[0].innerText="Submit"
};


 

Answer 1

Try this code:

function what(){
    let buttonElement = document.getElementsByClassName("ms-Button--primary")[0];
    if (buttonElement) {
        buttonElement.innerText = "Submit";
    }
};

There maybe a better selector we can use for accessing the button element from DOM. Please "Inspect" the button element and add screenshot to your question. I will suggest you the better selector is possible.

Edit:

As per my test on modern experience:

You can use below selector to select the "Save" button at the bottom/end of the form:

document.querySelector("button[data-automationid='ReactClientFormSaveButton'][class^='ms-Button']")

Use below selector to select the "Save" button from top of the form (Menu/Command bar in form):

document.querySelector("button[role='menuitem'][title='Save']")