So, I'm trying to connect my xml input to Javascript file through php(optional). I have to concatenate the xml input with all the h1 tags of my site. I'm trying to avoid inline javascript.

This is my php snippet for loading the js file.

$this->app->getDocument()->getWebAssetManager()->registerAndUseScript('plg_system_headings', 'media/plg_system_headings/js/index.js', [], ['defer' => true]);

And this is my xml snippet:

<files>
        <filename plugin="headings">headings.php</filename>
    </files>
    <media folder="media" destination="plg_system_headings">
        <!--<folder>css</folder>-->
        <folder>js</folder> 
    </media>
    <languages>
        <language tag="en-GB">language/en-GB.plg_system_headings.ini</language>
    </languages>
    <config>
        <fields name="params">
          
            <fieldset name="basic">
                <field
                    name="text_input"
                    type="text"
                    label="HEADINGS_TEXT_VS"
                    default="Greetings!!"
                />
            </fieldset>
          
        </fields>
    </config>

now I want the variable $this->params->get('text_input') to get passed in the js file. I tried writing it this way but it's not able to access this variable.

 window.onload = () => {
    // Display the alert
    let h1 = document.getElementsByTagName('h1')[0];
    h1.innerHTML= h1.concat(" . $this->params->get('text_input') . ");
}