Question

为什么我遇到“无法读取属性‘addEventListener’为空”的错误？

2020-02-15

63

javascript css function

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";
}

我有一个简单的导航栏，当我决定使用悬停效果使其更有趣时，我决定使用 JS 而不是 CSS，当我在 chrome 中运行代码时，我出现了“无法读取属性‘addEventListener’为 null”的错误，我不知道为什么？

我需要一些帮助...

Answer 1

因为 <script> 位于文件开头。因此，当它执行时，元素 change 未加载，因此变量为 null 。将脚本放在文档末尾或设置属性 defer 。具有此属性的脚本会等待 DOM 加载，然后执行。

Answer 2

您还可以将代码包装在 DOMContentLoaded 事件监听器中，以确保它仅在 DOM 准备就绪后触发。

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>
  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>

更改后的代码片段（无错误）

<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>

但无论如何，除此之外，如果您只是在悬停时更改元素的字体大小，则实际上不需要使用 javascript。您可以使用 CSS 来实现，如下所示

纯 CSS 代码段

#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>