JavaScriptでクリック回数によってURLが変わるリンクを作成する方法

上記の1回目ではいけないリンクをクリックすると

1回目https://news.yahoo.co.jp/が新しいタブで開く。
2回目https://news.livedoor.com/が新しいタブで開く。
3回目以降は現在のウィンドウでhttps://itkagyo.com/に遷移。

javascript

// リンク要素を取得
const myLink = document.getElementById('myLink');

// クリック回数のカウンター
let clickCount = 0;

// クリックイベントのリスナーを追加
myLink.addEventListener('click', function(event) {
  // デフォルトのリンク遷移をキャンセル
  event.preventDefault();

  // クリック回数をインクリメント
  clickCount++;

  // リンク先のURL
  let linkURL;

  // クリック回数に応じてリンク先のURLを設定
  if (clickCount === 1) {
    linkURL = 'https://news.yahoo.co.jp/'; // 1回目のリンク先のURL
    // 別ウィンドウでリンクを開く
    window.open(linkURL, '_blank');
  } else if (clickCount === 2) {
    linkURL = 'https://news.livedoor.com/'; // 2回目のリンク先のURL
    // 別ウィンドウでリンクを開く
    window.open(linkURL, '_blank');
  } else {
    linkURL = 'https://itkagyo.com/'; // 3回目以降のリンク先のURL
    // 同じウィンドウでリンクを開く
    window.location.href = linkURL;
  }
});
  • リンク要素の取得
    document.getElementById('myLink')を用いて、HTML内に設定したidが’myLink’のリンク要素を取得します。その結果をmyLinkという定数に格納します。これにより、JavaScriptからこのリンク要素を操作することが可能になります。

  • クリック回数のカウンターの設定
    let clickCount = 0;を用いて、クリック回数を記録するカウンターを初期化します。このカウンターはリンクがクリックされるたびに増加します。

  • クリックイベントのリスナーの追加
    myLink.addEventListener('click', function(event) {...}で、リンクがクリックされたときに実行される関数(リスナー)を設定します。この関数ではリンクの挙動が制御されます。

  • デフォルトのリンク遷移のキャンセル
    event.preventDefault();で、デフォルトのリンク遷移(リンクがクリックされたときに自動的に行われるページの移動)をキャンセルします。これにより、リンクの動作を自由に制御することが可能になります。

  • クリック回数のインクリメント
    clickCount++;でクリック回数を1つ増加させます。

  • クリック回数に応じたリンク先URLの設定とリンクの開き方の制御
    if (clickCount === 1) {...} else if (clickCount === 2) {...} else {...}で、クリック回数に応じてリンク先のURLを設定し、そのリンクがどのように開くかを制御します。

HTML

<a href="https://itkagyo.com/" id="myLink">1回目ではいけないリンク</a>

3つの実用例

研修用リンク

この方法は、新入社員の研修に使えます。初回と二回目のクリックでは基本的な情報を提供し、3回目のクリック以降でより深い情報を提供することで、段階的な学習を実現できます。

マーケティングキャンペーン

マーケティングキャンペーンでこの機能を活用します。初回と二回目のクリックではプロモーション情報を表示し、3回目のクリック以降で製品やサービスの詳細ページに誘導します。

ゲームやクイズのウェブサイト

ゲームやクイズのウェブサイトで使用します。クリックする度に異なるページやヒントが表示されることで、ユーザーの興味や参加意欲を引き立てます。

これやられるとユーザーは嫌なので、使わないことをおすすめします。

YouTubeのチャンネル登録はこちら!!
( *ˊᵕˋ)σ 凸ポチッと応援よろしくね!!
開発・運営ランキング にほんブログ村 IT技術ブログ IT技術情報へ
記事を書いてる人
病根のバグ

ガラケー時代からWEB開発やってるバツイチ自宅SEです。不眠不休で働くので、ブログのブックマークとYouTubeのチャンネル登録とXのフォローお願いします。デスマ上等!!

「○○を知りたい!!」「○○が分からない!!」などありましたら、Twitterでもブログでもコメントいただければ、ご期待に添えるように頑張ります!

病根のバグのSNSを覗く!!
JavaScript
病根のバグのSNSを覗く!!
ITkagyo

コメント

タイトルとURLをコピーしました