Aタグのリンク先URLを動的に変更する

JavaScriptで Aタグのリンク先URLを動的に変更するコードを紹介します。

概要

Aタグのリンク先のURLを変更する場合は、Aタグの要素を取得し、href プロパティに遷移先のURLを設定します。

プログラム例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    function button_click(value) {
      var target = document.getElementById("searchLink");
      if (value == 0) {
        target.href = "http://google.co.jp";
        target.innerText = "サイトへのリンク (google)";
      }
      else if (value == 1) {
        target.href = "http://yahoo.co.jp";
        target.innerText = "サイトへのリンク (Yahoo)";
      }
      else if (value == 2) {
        target.href = "https://www.bing.com/?cc=jp";
        target.innerText = "サイトへのリンク (Bing)";
      }
      else if (value == 3) {
        target.href = "http://ja.wikipedia.org";
        target.innerText = "サイトへのリンク (Wikipedia)";
      }
    }
  </script>
</head>
<body>
  <a id="searchLink" href="http://www.google.co.jp">サイトへのリンク (Google)</a><br/>
  <hr />
  <input type="button" value="Google" onclick="button_click(0);" />
  <input type="button" value="Yahoo" onclick="button_click(1);"/>
  <input type="button" value="Bing" onclick="button_click(2);" />
  <input type="button" value="Wikipedia" onclick="button_click(3);" />
</body>
</html>

解説

ボタンをクリックすると、button_click()関数を呼び出し、その中でidが"searchLink"のAタグのリンクの遷移先とリンク文字列を変更します。リンクの遷移先はhrefプロパティにURLを設定します。リンク文字列はinnerTextプロパティに設定しています。
button_click()関数の引数の値に応じて、0であればGoogle, 1の場合はYahoo, 2の場合はBing, 3の場合はWikipediaにリンク先を動的に変更します。