我有一个问题，我有一个html 'p'标签，它应该适用于一个javascript函数。这是一个动画打字脚本，但它似乎不工作。脚本只有当我把它放在下面的html 'p'标签。

<link href="{% static 'js/animation.js' %}" rel="stylesheet"/>

 <!--test active type writing animation-->
                <div class="container-animation">
                <p id="p_type">I'm <span class="typed-text"></span><span class="cursor">&nbsp;</span></p>
                </div>

<!-- To check , how to implement the script in js file and why it isn't working and only working-->

                <script>
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["a Data Analyst", "a Developer", "Henry Dumont"];
const typingDelay = 100;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  }
  else {
    cursorSpan.classList.remove("typing");
    setTimeout(erase, newTextDelay);
  }
}

function erase() {
    if (charIndex > 0) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  }
  else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
  if(textArray.length) setTimeout(type, newTextDelay + 250);
});
</script>

为什么代码不工作，如果它保存在一个文件中，并在头脚本调用。它只工作时，代码是写在脚本html标签？

我希望在头中调用脚本，并在html页面中进行硬编码。