I have 2 javascript files.

js file 1 contains the time delay for a speech bubble to appear with animation

see js file 1 code

let bubble = document.getElementById("speach-bubble");
let noDisplay; bubble.style.display ="none";

const delay = setTimeout(bubbleAnimate,1500)

function bubbleAnimate()
{
    noDisplay = bubble.style.display ="block";
    bubble.style.animation="slidein 0.5s 1";
}

with js file 2 I am trying to make a function that when user clicks submit after typing in their name the speech bubble changes to "welcome to your to-do App" + name

this is what I have so far

let welcome ="Welcome to your To-Do App"

windows.onload = function()
{
    document.getElementById("userName").onsubmit = function()
    {
        let text = document.getElementById("nameId");
        let changebox = document.getElementById("speach-bubble").innerHTML = welcome + " " + text;
    }
}

this is the elements I am working on within my HTML file

 <div class=container>
        <div class= base>
            <div class = screen>
                <img src="images/WarGreymon_Render.png" alt="Wargreymon">
                <div id ="speach-bubble"> What is your 
                    name?
                <div id = "bubble-text">
                </div>
                </div>
            </div>
            <div class = "nameInput">
                <form id ="userName">
                <input type="text" id ="nameId" name="name" placeholder="Type your name here...">
                <input type="submit" id ="submit" value="Submit">
            </form>
           
            </div>
        </div>

is there a way to link js file 1 to js file 2 so that I can influence the speech bubble after userinput has been submitted.