javascript:void(0): что это и почему ссылка не открывается

Если при наведении на ссылку внизу браузера появляется javascript:void(0), а после клика ничего не открывается, это сбивает с толку. Вроде ссылка есть, курсор меняется, но перехода нет

Коротко: javascript:void(0) — старый способ сделать ссылку, которая не ведет на новую страницу. Вместо перехода разработчик рассчитывает выполнить JavaScript-код: открыть меню, модальное окно, вкладку, выпадающий список или запустить действие на странице

Если JavaScript не сработал, пользователь видит "мертвую" ссылку

Как выглядит проблема

В HTML может быть такая ссылка:

<a href="javascript:void(0)" class="open-modal">Открыть окно</a>

В идеале где-то рядом есть JavaScript:

const link = document.querySelector(".open-modal");
const modal = document.querySelector(".modal");

link.addEventListener("click", () => {
  modal.classList.add("is-open");
});

href="javascript:void(0)" не открывает страницу. Он просто не дает ссылке вести куда-то. Настоящее действие должно быть в обработчике клика

Что делает void(0)

void в JavaScript вычисляет выражение и возвращает undefined. В javascript:void(0) выражение 0 ничего полезного не делает, а итогом становится undefined

Для ссылки это использовали как прием: браузер не переходит на другую страницу и не меняет адрес

Но для современных интерфейсов это часто не лучший вариант. Если элемент не ведет на страницу, лучше использовать кнопку:

<button type="button" class="open-modal">Открыть окно</button>

А если это настоящая ссылка, у нее должен быть нормальный href:

<a href="/catalog">Открыть каталог</a>

Почему клик ничего не делает

Причин несколько

JavaScript на странице сломался

Если в скрипте ошибка, обработчик клика может не подключиться

Открой DevTools, вкладку Console. Ищи красные ошибки:

Uncaught TypeError
Cannot read properties of null

Например:

const link = document.querySelector(".open-modla");

link.addEventListener("click", () => {
  console.log("open");
});

Класс написан с ошибкой: .open-modla вместо .open-modal. querySelector вернет null, код упадет

JavaScript отключен в браузере

Если сайт построен так, что ссылка работает только через JS, при отключенном JavaScript она не откроется

Проверь настройки браузера или расширения, которые блокируют скрипты

Блокировщик рекламы или расширение мешает скрипту

Иногда расширение блокирует часть JavaScript-файлов. В итоге ссылка остается, но логика не загружается

Проверка:

1. Открой сайт в режиме инкогнито без расширений.
2. Попробуй другой браузер.
3. Посмотри Console.

Сайт сделан неаккуратно

Иногда javascript:void(0) поставили как заглушку и забыли добавить действие. Тогда пользователь ничего не может сделать, потому что действия действительно нет

Что делать обычному пользователю

Если ты не разработчик сайта:

1. Обнови страницу.
2. Отключи блокировщик рекламы для сайта на минуту.
3. Проверь в другом браузере.
4. Проверь, включен ли JavaScript.
5. Очисти кэш сайта.
6. Если это личный кабинет или магазин, напиши поддержке и приложи скриншот.

Не надо скачивать JavaScript или устанавливать Java. Проблема не в отсутствии отдельной программы

Что делать разработчику

Если ты сам делаешь страницу, лучше не использовать javascript:void(0) для интерактивных элементов

Для действия используй кнопку:

<button type="button" class="open-modal">Открыть окно</button>

const button = document.querySelector(".open-modal");

button.addEventListener("click", () => {
  console.log("Открываем окно");
});

Для ссылки используй ссылку:

<a href="/pricing">Тарифы</a>

Если нужно временно отменить переход, можно обработать клик:

const link = document.querySelector(".demo-link");

link.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("Переход отменен");
});

Но лучше не превращать ссылку в кнопку. Это влияет на доступность, навигацию с клавиатуры и предсказуемость интерфейса

Почему href="#" тоже не идеален

Еще один старый прием:

<a href="#">Открыть</a>

Если забыть event.preventDefault(), страница прыгнет вверх, потому что # ведет к началу страницы или якорю

Для действия все равно лучше:

<button type="button">Открыть</button>

Нормальная структура для модального окна

HTML:

<button type="button" class="open-modal">Открыть окно</button>

<div class="modal" hidden>
  <p>Это модальное окно</p>
  <button type="button" class="close-modal">Закрыть</button>
</div>

JavaScript:

const openButton = document.querySelector(".open-modal");
const closeButton = document.querySelector(".close-modal");
const modal = document.querySelector(".modal");

openButton.addEventListener("click", () => {
  modal.hidden = false;
});

closeButton.addEventListener("click", () => {
  modal.hidden = true;
});

Так код честнее: кнопки выполняют действия, ссылки ведут на страницы

Частые ошибки

Ссылка есть, обработчика нет

HTML написали, JavaScript забыли. Клик ничего не сделает

Ошибка в классе

В HTML .open-modal, в JS .openModel. Элемент не находится

Скрипт подключен до HTML

Код ищет элементы раньше, чем браузер их создал. Для первых уроков подключай script перед </body>

Используется ссылка вместо кнопки

Если элемент не ведет на другую страницу, лучше сделать кнопку

Мини-задание

Переделай такую ссылку:

<a href="javascript:void(0)" class="show-message">Показать сообщение</a>
<p class="message" hidden>Сообщение открыто</p>

В нормальный вариант:

<button type="button" class="show-message">Показать сообщение</button>
<p class="message" hidden>Сообщение открыто</p>

const button = document.querySelector(".show-message");
const message = document.querySelector(".message");

button.addEventListener("click", () => {
  message.hidden = false;
});

Ответы на эти вопросы могут быть для вас полезными

Что значит javascript:void(0)?

Это JavaScript-выражение, которое ничего полезного не возвращает. В ссылках его часто использовали, чтобы отменить переход и оставить действие на JS-обработчике

Это вирус?

Само по себе нет. Но если ссылка ведет себя странно, стоит быть внимательным к сайту и расширениям. javascript:void(0) чаще означает старую или неаккуратную верстку

Почему ссылка не открывается?

Потому что у нее нет настоящего адреса. Она должна была запускать JavaScript-действие, но скрипт мог не загрузиться, сломаться или быть заблокированным

Как исправить на своем сайте?

Если это действие, используй button. Если это переход, поставь нормальный href. Не делай навигацию через заглушку

Нужно ли включать JavaScript?

Если сайт использует такие ссылки, без JavaScript они часто не работают. Но хороший сайт должен быть предсказуемым даже при ошибках скрипта

Что почитать дальше по JavaScript

Чтобы двигаться по теме без рывков, рядом лучше открыть:

• События и клики в JavaScript: addEventListener без путаницы — разобрать современный способ повесить действие на клик.
• Как включить JavaScript в браузере — проверить, не блокирует ли браузер выполнение скриптов.
• JavaScript с нуля: меняем текст на странице по клику — увидеть нормальный пример изменения страницы по клику.
• Promise и AJAX в JavaScript: первый запрос через fetch — перейти к кликам, которые запускают загрузку данных.