Как сделать ссылку из любого элемента с помощью onClick

В веб-разработке существует несколько способов сделать элемент (например, кнопку или div) ссылкой с помощью JavaScript-события onClick.

Выбор метода зависит от того, как должна открываться страница: в той же вкладке или в новой.

1. Переход в той же вкладке

Самый простой и популярный способ — использование свойства window.location.href. Это имитирует обычный клик по ссылке.

<button onclick="window.location.href='https://www.overcod.net';">
  Перейти
</button>

2. Открытие в новой вкладке

Если вам нужно, чтобы ссылка открылась в новом окне или вкладке, используйте метод window.open().

<button onclick="window.open('https://www.overcod.net', '_blank');">
  Открыть в новом окне
</button>

3. Использование в JavaScript-функции

Если перед переходом нужно выполнить какой-то код (например, сохранить данные или отправить метрику), лучше вынести логику в функцию.

<div onclick="goToPage()" style="cursor:pointer; border:1px solid #000; padding:10px;">
  Кликни на этот блок
</div>

<script>
function goToPage() {
  console.log("Логика перед переходом...");
  window.location.assign("https://www.overcod.net");
}
</script>

Важные советы:

• Добавьте cursor: pointer: Если вы делаете ссылкой не <a> и не <button>, пользователь не поймет, что на элемент можно нажать. Добавьте этот стиль в CSS, чтобы при наведении курсор менялся на «ручку».

• SEO и доступность: Поисковые роботы не всегда переходят по ссылкам, созданным через onclick. Если это критически важная навигация, лучше использовать стандартный тег <a href="...">.

• Метод .assign() и .replace():

  • location.assign("url") — сохраняет текущую страницу в истории (можно нажать кнопку «Назад»).

  • location.replace("url") — удаляет текущую страницу из истории (кнопка «Назад» не вернет пользователя).

БОНУС

1. Анимация перед уходом (Smooth Exit)

Этот прием избавляет пользователя от резкого белого экрана при переходе. Мы плавно скрываем контент текущей страницы перед тем, как отправить пользователя по ссылке.

<button onclick="smoothRedirect('https://www.overcod.net')" style="padding: 10px 20px; cursor: pointer;">
  Плавный переход
</button>

<script>
function smoothRedirect(url) {
  // Настраиваем плавность перехода для всего тела страницы
  document.body.style.transition = "opacity 0.5s ease";
  // Делаем страницу прозрачной
  document.body.style.opacity = "0";

  // Ждем 500мс (время совпадает с transition), затем переходим
  setTimeout(() => {
    window.location.href = url;
  }, 500);
}
</script>

2. Защита от случайного клика (Double Check)

Это критически важно для страниц с формами, опросами или личными кабинетами. Если пользователь случайно нажмет на кнопку выхода, скрипт переспросит его о намерениях.

<button onclick="safeRedirect('https://www.overcod.net')" style="padding: 10px 20px; color: white; background: red; border: none; cursor: pointer;">
  Покинуть кабинет
</button>

<script>
function safeRedirect(url) {
  // Вызываем стандартное диалоговое окно браузера
  const isConfirmed = confirm("Вы уверены, что хотите покинуть страницу? Несохраненные данные будут потеряны.");
  
  // Если пользователь нажал "ОК", выполняем переход
  if (isConfirmed) {
    window.location.assign(url);
  }
  // Если нажал "Отмена" — ничего не происходит, остаемся на месте
}
</script>