Як зробити посилання з будь-якого елемента за допомогою 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";
  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>