ダイアル式ホバーメニューエフェクトのリンク先の切り替え

Question

前提・実現したいこと

HTML5,css3,JavaScriptを用いてダイアル式ホバーメニューエフェクトを作成しています。
サンプルを参考に作成しリンク先の切り替えを実装したいのですが、ループの中でlink.href = "#";を使用しており、この"#"部分を該当HTMLファイル名にすることで単一リンクへの移動はできるのですが複数のリンク先への移動が上手くいかない状態です。link.href = "#";の意味を理解していないことが原因かと思われます。何卒ご教授お願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

現在作成中のJavaScriptのサンプルコードです
function addLinks() {
for (var i=0, l=links.length; i<l; i++) {
link = document.createElement('a'),
hover = document.createElement('span');
link.href = "#";
link.dataset.color = links[i].bg;
link.style.display = 'inline-block';
link.style.textDecoration = 'none';
link.style.color = '#fff';
link.style.position = 'absolute';
link.style.zIndex = 100;
link.innerHTML = links[i].label;
hover.style.position = 'absolute';
hover.style.display = 'inline-block';
hover.style.zIndex = 50;
hover.style.opacity = 0;
document.body.appendChild(link);
document.body.appendChild(hover);
link.addEventListener('mouseover', linkOver);
link.addEventListener('mouseout', linkOut);
links[i].elem = link;
links[i].hover = hover;
}

### 試したこと

Javascript内での複数リンク先の記述
link.href = "#";の"#"部分の意味の理解

Comments

[kei344]

（質問文は編集できます）linksなどの定義箇所や、HTMLも質問文にコードブロックで追記してください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[hoshi-takanori]

links という配列にはどんな値が入ってますか？

[hoshi-takanori]

また、参考にしたサンプルがあるならそのリンクや書籍名などをお書きいただけると答えやすいです。

[Man_na]

返信が遅くなってしまい申し訳ありません。
参考リンクはこちらのhttp://photoshopvip.net/97481、Circular Links Menu (Responsive)というものを参考にしております。
1.HTMLは<script></script>で囲みJavaScriptを読み込めるようにしたmain.html、リンク先にあるtest1.htmlから連番になっております。(test6.htmlまで)
2.linksの配列にはホバーメニューの名前を定めたlabelと背景の色を変更する変数bgを格納しています。

[kei344]

（質問文は編集できます）linksなどの定義箇所や、HTMLも質問文にコードブロックで追記してください。

Answer 1

links という配列には label と bg が入ってるとのことですが、次のように

var links = [
  {
    label: "メニュー1",
    bg: "red",
    url: "https://teratail.com/",
  },
  {
    label: "メニュー2",
    bg: "blue",
    url: "https://google.com/",
  },
  // 以下略
];

url という項目を追加して、addLinks の link.href = "#"; を

function addLinks() {
  for (var i=0, l=links.length; i<l; i++) {
    var link = document.createElement('a');
    var hover = document.createElement('span');
    link.href = links[i].url;
    // 以下略
  }
}  

のように書き換えればいいと思います。

---

それから、link.href = "#";（HTML で <a href="#"> と書くのと同様）の意味ですが、URL に #なんとか を付けるとページの先頭ではなく指定した場所に飛ばすことができます。
例えば、https://yossense.com/link-tag/#no02-05 という URL を指定すると [HTML] リンクタグ（aタグ）って何?基本から応用まで紹介! | ヨッセンス というページの「ページ内リンク」のところに飛びますよね。
さらに、飛び先が同じページ内にあれば、# の前を省略して <a href="#item-1">項目1</a> でそのページ内の特定の場所にスクロールさせることができます。これをページ内リンクと言います。
この際、スペルミスなどで飛び先が存在しないとページの先頭に戻っちゃうのですが、<a href="#"> の場合はそもそも飛び先を指定してないのでやっぱりページの先頭に飛びます。

で、HTML のサンプルにたまに <a href="#"> と書いてありますが、これは「飛び先を考えるのが面倒なので省略した」という意味なので、自分でページを作る時には正しいリンクを指定する必要があります。

---

あと、addLinks の中で link や hover という変数を宣言せずに使ってますが、これはあまり良くないので、頭に var（最近は let や const も使いますが）を付けて宣言することをお勧めします。
参考: 【JavaScript入門】varの使い方とlet,constとの違いについて解説 | プログラミング入門ならWEBCAMP NAVI