OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Even though my <script> is after my <div>, I'm getting a "TypeError: Cannot read properties of null (reading 'style')" error

  • Thread starter Thread starter HanYildirim
  • Start date Start date
H

HanYildirim

Guest
I have the following code, where the <script> is placed after my <div> that it refers to in the HTML file (both inside of <body>), but the browser is still giving the attached error.

Code:
<body>
    <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>
</body>

Error Message:

I've tried placing the <script> inside of the <div>, before the <div>, after the and after the </body> tag, but I still get the same error.

<p>I have the following code, where the <code><script></code> is placed after my <code><div></code> that it refers to in the HTML file (both inside of<code> <body></code>), but the browser is still giving the attached error.</p>
<pre><code><body>
<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>
</body>
</code></pre>
<p><a href="https://i.sstatic.net/HlVnKiiO.png" rel="nofollow noreferrer">Error Message:</a></p>
<p>I've tried placing the <code><script></code> inside of the <code><div></code>, before the <code><div></code>, after the and after the <code></body></code> tag, but I still get the same error.</p>
 

Latest posts

Top