JS: Как правильно обратиться к ссылке?

Question

Есть кнопка в меню шапки:

<li class="nav-item">
   <a href="#project_info" class="nav-link" id="project_info">О ПРОЕКТЕ</a>
</li>

Пытаюсь обратиться к этой кнопке, но браузер её не читает, видимо, я не правильно к ней обращаюсь:

var button = document.getElementById('project_info');

button.addEventListener('click', () => {
  console.log('Вы кликнули по кнопке');
});

Не кидайте в меня тапками, пожалуйста, я новичок. В чем моя ошибка? Как надо правильно обратиться к такой ссылке?

Спасибо!

Answer 1

Ваш код работал исправно.
Нажмите кнопку ниже "Выполнить код" и кликните на ссылку "О проекте", чтобы убедиться.

let button = document.querySelector('#project_info');

button.addEventListener('click', () => {
  alert('Вы кликнули по кнопке');
});

<li class="nav-item">
   <a href="#project_info" class="nav-link" id="project_info">О ПРОЕКТЕ</a>
</li>

Answer 2

Скорее всего, ваша ошибка заключается в том, что Ваш код загрузился раньше, чем "появилась" кнопка, т.к. браузер рендерит страницу "каскадом", он мог "прочитать" скрипт, обратиться к кнопке, а её ещё нет.

Первый способ решить эту проблему: Поместить скрипт в конец (обычно перед закрывающимся тегом body.

<html>
<head></head>
<body>
  <a id="#project_info"></a> <!-- Та самая кнопка -->
  <script></script> <!-- Тот самый скрипт -->
</body>
</html>

Второй вариант, запустить скрипт после "получения" всей страницы.
Тут месторасположение самого скрипта может быть где угодно, код начнёт выполнятся после получения всего кода страницы браузером, для этого есть слушатель DOMContentLoaded

В script

document.addEventListener('DOMContentLoaded', function() {
  let button = document.querySelector('#project_info');
  
  button.addEventListener('click', () => {
    alert('Вы кликнули по кнопке');
  });
});

БЛОГ НА HUSL

JS: Как правильно обратиться к ссылке?

Ответы (2 шт):