JavaScriptでリンクを設定する方法について教えてください

Question

<script type="text/javascript">
	window.onload = function(){ var linkID = "contact_form"; // リンクを設定するタグのID
	var linkURL = "contact.html";
	var baseTag = document.getElementById(linkID);
	var link1 = baseTag.firstChild.nodeValue;
	var aTag = document.createElement("a");
	aTag.href = linkURL; aTag.appendChild(document.createTextNode(link1));
	baseTag.replaceChild(aTag, baseTag.firstChild); }
</script>

---------------------

<li id="contact_form">
	お問い合わせはコチラ
</li>

上記のようなコードでliをクリックした時に contact.htmlへ遷移するように設定したのですが、複数リンクを設定するのにjavascriptは どのように書けばよろしいでしょうか？

完成形は下のようなHTMLコードです。

<div id="top-nav">
	<ul>
		<li id="contact_form1">お問い合わせ1</li>
		<li id="contact_form2">お問い合わせ2</li>
		<li id="contact_form3">お問い合わせ3</li>
		<li id="contact_form4">お問い合わせ4</li>
		<li id="contact_form5">お問い合わせ5</li>
		<li id="contact_form6">お問い合わせ6</li>
	</ul>
</div>

すいません、私の説明足らずでしたので追記させていただきます↓
liのリンクはそれぞれ別の飛び先になります。

私がサンプルで書いた内容ですと
●「contact_form」と言うIDがついてるものは「contact.html」へリンク
ですが、↑の設定を活かしたままで
●『contact_form2』のIDがついたliをクリックした時『contact2.html』へリンクする
と言うリンク設定を増やしていきたい場合にはどうすればよいでしょうか？

---

さらに追記しました

<script type="text/javascript">
	window.onload = function(){ var linkID = "contact_form"; // リンクを設定するタグのID
	var linkURL = "contact.html";
	var baseTag = document.getElementById(linkID);
	var link1 = baseTag.firstChild.nodeValue;
	var aTag = document.createElement("a");
	aTag.href = linkURL; aTag.appendChild(document.createTextNode(link1));
	baseTag.replaceChild(aTag, baseTag.firstChild); }
</script>


<div id="top-nav" class="">
	<ul id="fixed-nav">
		<li id="contact_form">お問い合わせはコチラ</li>
		<li id="privacypolicy">プライバシーポリシー</li>
	</ul>
</div>

何度もすいません、あくまでサンプル用だったのでリンク先の名前などアテで行ってましたが、かえって混乱させてしまい申し訳ありません。。
上記が正規コードです、このコードでプライバシーポリシーのリンク設定をどのようにすればいいかご教授お願い致します。飛び先は「privacypolicy.html」にする予定です。

Answer 1

• top-nav内のliを拾う
• idがcontact_formxxx(xxxは数値)のものを拾う
• 「contact_form」classを付けてそれを拾う

のどれかになるでしょう

追記

とりあえず,top-navのliをひろってみます

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#top-nav li'),function(x){
    var linkURL = "contact.html";
    var link1 = x.textContent;
    var aTag = document.createElement("a");
    aTag.setAttribute("href",linkURL)
    aTag.appendChild(document.createTextNode(link1));
    x.textContent="";
    x.appendChild(aTag);
  });
});
</script>
<div id="top-nav">
<ul>
<li id="contact_form1">お問い合わせ1</li>
<li id="contact_form2">お問い合わせ2</li>
<li id="contact_form3">お問い合わせ3</li>
<li id="contact_form4">お問い合わせ4</li>
<li id="contact_form5">お問い合わせ5</li>
<li id="contact_form6">お問い合わせ6</li>
</ul>
</div>

修正

idのcontact_form以降の数値を利用してconctactxxx.htmlにリンクを張ればいいのですね？

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#top-nav li'),function(x){
    var linkBasename = "contact";
    var linkExtension = ".html";
    var link1 = x.textContent;
    if(r=x.getAttribute('id').match(/^contact_form(.+)$/)){
      var aTag = document.createElement("a");
      aTag.setAttribute("href",linkBasename+r[1]+linkExtension)
      aTag.appendChild(document.createTextNode(link1));
      x.textContent="";
      x.appendChild(aTag);
    };
  });
});
</script>
<div id="top-nav">
<ul>
<li id="contact_form1">お問い合わせ1</li>
<li id="contact_form2">お問い合わせ2</li>
<li id="contact_form3">お問い合わせ3</li>
<li id="contact_form4">お問い合わせ4</li>
<li id="contact_form5">お問い合わせ5</li>
<li id="contact_form6">お問い合わせ6</li>
<li id="contact_form100">お問い合わせ100</li>
</ul>
</div>

法則性がない

法則性がないなら、リストを羅列するしか無いですね

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#top-nav li'),function(x){
    var links ={
      "contact_form":"contact.html",
      "privacypolicy":"privacypolicy.html",
    };
    var id=x.getAttribute("id");
    var reg=new RegExp("^"+Object.keys(links).join("|")+"$");
    if(id.match(reg)){
      var link1 = x.textContent;
      var aTag = document.createElement("a");
      aTag.setAttribute("href",links[id]);
      aTag.appendChild(document.createTextNode(link1));
      x.textContent="";
      x.appendChild(aTag);
    }
  });
});
</script>
<div id="top-nav">
<ul id="fixed-nav">
<li id="contact_form">お問い合わせはコチラ</li>
<li id="privacypolicy">プライバシーポリシー</li>
<li id="test">テスト</li>
</ul>
</div>

ローレベル処理

念の為もっとローレベルな処理を書いておきます
これならIEの相当古いバージョンでも動作します

<script>
window.onload= function(){
  var obj=document.getElementById('top-nav').getElementsByTagName('li');
  for(var i=0;i<obj.length;i++){
    var x=obj[i];
    var links ={
      "contact_form":"contact.html",
      "privacypolicy":"privacypolicy.html"
    };
    var id=x.getAttribute("id");
    var str="";
    for(var j in links){
      if(str!=="") str+="|";
      str+=j;
    }
    var reg=new RegExp("^"+str+"$");
    if(id.match(reg)){
      var link1 = x.innerHTML;
      var aTag = document.createElement("a");
      aTag.setAttribute("href",links[id]);
      aTag.appendChild(document.createTextNode(link1));
      x.innerHTML="";
      x.appendChild(aTag);
    }
  };
};
</script>
<div id="top-nav">
<ul id="fixed-nav">
<li id="contact_form">お問い合わせはコチラ</li>
<li id="privacypolicy">プライバシーポリシー</li>
<li id="test">テスト</li>
</ul>
</div>

Comments

[ryuji0205]

申し訳ありません、javascriptの事があまりわかっていないので 具体的にどのようなコードを書けば良いか教えて頂けますでしょうか？

[yambejp]

一例あげておきます。他の方法で実現したい場合はどうしたいか指示下さい

[ryuji0205]

コードありがとうございます。
申し訳ありません、私の説明不足でした、詳細を追記させていただきます。

すいません、私の説明足らずでしたので追記させていただきます↓
liのリンクはそれぞれ別の飛び先になります。

私がサンプルで書いた内容ですと
●「contact_form」と言うIDがついてるものは「contact.html」へリンク
ですが、↑の設定を活かしたままで
●『contact_form2』のIDがついたliをクリックした時『contact2.html』へリンクする
と言うリンク設定を増やしていきたい場合にはどうすればよいでしょうか？

[yambejp]

修正しました。意図と違うようなら再度ご指摘下さい

[ryuji0205]

何度も何度ももうしわけありません、再度詳細を追記させて頂きましたのでご確認をお願い致します。

[yambejp]

contact_formはcontact.htmlでprivacypolicyがprivacypolicy.htmlだと
法則性が薄いですが
もしほかにxxx_formがあればxxx.htmlになり、それ以外は
idに.htmlをつければよいのでしょうか？

[ryuji0205]

法則性が薄いのは重々承知です...既存サイトの仕様変更を急にふられてしまったのであまりいじれないの現状です(泣)

現状、上記の2項目(コンタクトとプラポリ)のみで追加はなさそうです！

[yambejp]

法則性がないものを仕様を明確にせず処理させるのは無理があります。
一応リストを羅列する方法を提示しておきます

[ryuji0205]

ソースのご共有ありがとうございます、やはり法則性などが必要なのですね..
さっそく教えて頂いたソースを反映したのですが、こちらのソースですとリンクの反応がありませんでした..

[yambejp]

WinならIE9以上、Firefox、chromeで動作確認はしてあります。
（全文をそのままコピペして試して下さい）
動かない場合は具体的なOSとブラウザの種類、バージョンなど
提示したほうがよいでしょう

[ryuji0205]

こちらはwindows10 Firefox 59.0.2 (64 ビット)と表示されております。
すべてコピペしたのですが...

[yambejp]

例えば「法則性がない」セクションに提示したソース
<script>から</div>までコピペで適当な名前でhtmlを保存するだけですよ
F12をおして開発画面をみたときコンソールにエラーは表示されますか？