I am trying to use bubble.js function and have the function of bubble.js apply to my new js file called bubbleChanged.js file

bubble.js:

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

const delay = setTimeout(bubbleAnimate,1500)

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

}

bubbleChanged.js:

import{bubbleAnimate} from '../js/bubble.js';

let form = document.querySelector('.form')

form.addEventListener('submit' , (e) => {
    
    e.preventDefault();

  const input = document.getElementById('input').value;
  let textChange= document.getElementById('speach-bubble');

  textChange.innerHTML = "Welcome to your To-do app \n" + input;
  bubbleAnimate()
});

bubbleAnimate()
{
    textChnage.style.display ="block";
    textChnage.style.animation="slidein 1.6s 1";
}

not sure what I am doing wrong here? should the bubbleAnimate() be inside the event listener?

In short, when the speech bubble is updated after user input the same animation needs to happen when the speech bubble changes