CODEWITHSUNDEEP
javascriptcssfunction
blockchainer
blockchainer

Reputation: 17

Why i have Cannot read property 'addEventListener' of null error?

HTML:

 <body>
<script src="dynamic.js"></script>
<nav>
  <label id="logo">My Life</label>
  <ul id="test">
    <li>
      <a href="#" id="change">Home</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Feedback</a>
    </li>
    <li>
      <a href="#" class="active">Log in</a>
    </li>
  </ul>
</nav>

JavaScript:

const change = document.getElementById("change");
change.addEventListener("mouseover", () => changeFont());
change.addEventListener("mouseout", () => normalFont());

function changeFont() {
  change.style.fontSize = "25px";
}

function normalFont() {
  change.style.fontSize = "15px";
}

I have simple navigation bar and when i decide to make it more interesting with hover effect I decide to be with JS NOT CSS and when i run the code in chrome i have a "Cannot read property 'addEventListener' of null" error and I can't figure out why?

I need some help ...

Upvotes: 0

Views: 63

Answers (2)

volt
volt

Reputation: 1003

You can also wrap your code in a DOMContentLoaded event listener to make sure it only fires after the DOM is ready.

window.addEventListener('DOMContentLoaded', () => {
  const change = document.getElementById("change");
  change.addEventListener("mouseover", () => changeFont());
  change.addEventListener("mouseout", () => normalFont());

  function changeFont() {
    change.style.fontSize = "25px";
  }

  function normalFont() {
    change.style.fontSize = "15px";
  }
});

Snippet before the change (error thrown)

<script>
  const change = document.getElementById("change");
  change.addEventListener("mouseover", () => changeFont());
  change.addEventListener("mouseout", () => normalFont());

  function changeFont() {
    change.style.fontSize = "25px";
  }

  function normalFont() {
    change.style.fontSize = "15px";
  }
</script>
<nav>
  <label id="logo">My Life</label>
  <ul id="test">
    <li>
      <a href="#" id="change">Home</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Feedback</a>
    </li>
    <li>
      <a href="#" class="active">Log in</a>
    </li>
  </ul>
</nav>

snippet after change (no error)

<script>
  window.addEventListener('DOMContentLoaded', () => {
    const change = document.getElementById("change");
    change.addEventListener("mouseover", () => changeFont());
    change.addEventListener("mouseout", () => normalFont());

    function changeFont() {
      change.style.fontSize = "25px";
    }

    function normalFont() {
      change.style.fontSize = "15px";
    }
  });
</script>
<nav>
  <label id="logo">My Life</label>
  <ul id="test">
    <li>
      <a href="#" id="change">Home</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Feedback</a>
    </li>
    <li>
      <a href="#" class="active">Log in</a>
    </li>
  </ul>
</nav>

But anyway, besides that, you actually don't need to use javascript if you're only changing the element font-size on hover. You can do that with CSS like so

Pure CSS snippet

#change:hover,
#change:active,
#change:focus {
  font-size: 25px;
}
<nav>
  <label id="logo">My Life</label>
  <ul id="test">
    <li>
      <a href="#" id="change">Home</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Feedback</a>
    </li>
    <li>
      <a href="#" class="active">Log in</a>
    </li>
  </ul>
</nav>

Upvotes: 0

Sergei Martianov
Sergei Martianov

Reputation: 301

Because <script> in the beggining of the file. So when it executes element change is not loaded and so variable is null. Put your script in the end of the document or set the attribute defer. Scripts with this attribute wait when the DOM will be loaded and after that execute.

Upvotes: 1

Related Questions