Почему я не могу прочитать свойство 'addEventListener' с нулевой ошибкой? - PullRequest
Новая
       0

Почему я не могу прочитать свойство 'addEventListener' с нулевой ошибкой?

0 голосов
/ 15 февраля 2020

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 с нулевым значением», и я не могу понять, почему?

Мне нужны некоторые помощь ...

Ответы [ 2 ]

1 голос
/ 15 февраля 2020

Потому что <script> в начале файла. Поэтому, когда он выполняется, элемент change не загружается и поэтому переменная равна null. Поместите ваш скрипт в конец документа или установите атрибут defer. Скрипты с этим атрибутом ждут, когда DOM будет загружен и после этого будет выполнен.

0 голосов
/ 15 февраля 2020

Вы также можете заключить код в 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, например,

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...