I am encountering an issue with the code below. The <script> is positioned after the corresponding <div> in the HTML file, both residing within the <body> tags, however, the browser continues to display an error.
<div id="container" class="fancy" draggable="false">
<span id="l1" class="fly">A</span>
<span id="l2" class="fly">B</span>
<span id="l3" class="fly">O</span>
<span id="l4" class="fly">U</span>
<span id="l5" class="fly">T</span>
</div>
<script>
function hoverWord() {
for (let i = 1; i < 7; i++) {
let letter = document.getElementById("l" + i.toString());
let x = Math.floor(Math.random() * 200) - 100;
let y = Math.floor(Math.random() * 200) - 100;
let deg = Math.floor(Math.random() * 100) - 50;
letter.style.translate = `${x}% ${y}% `;
letter.style.rotate = `${deg}deg`;
}
//document.getElementById("container").style.boxShadow = "120px 80px 40px 20px #0ff;";
}
function resetWord() {
for (let i = 1; i < 7; i++) {
let letter = document.getElementById("l" + i.toString());
letter.style.translate = `0% 0% `;
letter.style.rotate = `0deg`;
}
}
let container = document.getElementById("container");
container.addEventListener("mouseenter", () => {
hoverWord();
});
</script>https://i.sstatic.net/HlVnKiiO.png
I have experimented with placing the <script> inside and outside of the <div>, before and after it, as well as after the </body> tag, yet I still encounter the same error.