リンクごとに違うページに飛ぶパスワードの作成

Question

前提・実現したいこと

location.hrefを用いたパスワードで、パスワードを入力した際に、
それぞれのリンクの情報を反映したアドレスに移動するJSを作成したいと思っています。

つまり、いくつかリンクがあるページで、一部のリンクにパスワードをつけたいと思っています。
ただし、全てのリンクでパスワードは同一で、リンク先は別にしたいのです。

同じパスワードを入力しても一律に
http://●●●.com/UserInput.html
に移動するのではなく、例えばそれぞれのidを取得して、
http://●●●.com/UserInputid1.html
http://●●●.com/UserInputid2.html
http://●●●.com/UserInputid3.html
に飛ぶようなJSを作成したいです。

getid();などを試してみましたがよく分かりませんでした。
どのようにJSやHTMLを変えればいいでしょうか。

<a href="#" id="id1" onclick="gate();">01</a>
<a href="#" id="id2" onclick="gate();">02</a>
<a href="#" id="id3" onclick="gate();">03</a>

   function gate() {
      var UserInput = prompt("パスワードを入力して下さい:","");
      location.href = UserInput + ".html";
   }

Comments

[m.ts10806]

ソースコードはマークダウンのcode機能を利用してください（質問は編集できます）

[m.ts10806]

今の状態だと入力した情報そのままのページに遷移していますよね。「パスワード入力値」＋「押したリンクのID」のhtmlは必ず存在するような仕組みなのでしょうか？

[m.ts10806]

「押したaタグのID属性の属性値」を取得するのは容易ですが、今回実現しようとしている機能の仕様がよくわかりません。

[aaaaMAX]

・「パスワード入力値」＋「押したリンクのID」のhtmlは必ず存在するような仕組みなのでしょうか？→存在します

[aaaaMAX]

目的→いくつかリンクがあるページで、一部のリンクにパスワードをつけたいと思っています。ただし、全てのリンクでパスワードは同一で、リンク先は別にしたいのです。

Answer 1

こういうことなのではないのでしょうか？

<a href="#" id="id1" onclick="gate(this);">01</a>
<a href="#" id="id2" onclick="gate(this);">02</a>
<a href="#" id="id3" onclick="gate(this);">03</a>

   function gate(anchor) {
      var UserInput = prompt("パスワードを入力して下さい:","");
      location.href = UserInput + anchor.id + ".html";
   }

Comments

[aaaaMAX]

まさしくそうです！
私のつたない説明を汲み取っていただきありがとうございます。
おかげさまで目的の機能が作成できました。ありがとうございました。

Answer 2

リンクを使う限り入力は不要では？

<a href="http://exsample.com/UserInputid1.html">01</a>
<a href="http://exsample.com/UserInputid2.html">02</a>
<a href="http://exsample.com/UserInputid3.html">03</a>

一応拡大解釈してこう

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll(".target"),function(x){
    x.addEventListener('click',function(e){
      e.preventDefault();
      var num=prompt("input 0-99");
      if(num.match(/^[1-9]?[0-9]$/)){
        location.href="http://exsample.com/UserInput"+num+".html";
      }else{
        alert('bad data');
      }
    });
  });
});
</script>
<a href="#" class="target">click here!</a>

修正版

念の為修正版挙げておきます

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll(".target"),function(x){
    x.addEventListener('click',function(e){
      e.preventDefault();
      var UserInput=prompt("input");
      location.href="http://exsample.com/"+UserInput+e.target.getAttribute("id")+".html";
    });
  });
});
</script>
<a href="#" id="01" class="target">01</a>
<a href="#" id="02" class="target">02</a>
<a href="#" id="03" class="target">03</a>
<a href="http://exsample.com/">non target</a>

Comments

[aaaaMAX]

ご回答ありがとうございます。
ただ、ご提示いただいた機能は私がやろうとしていることとは少し違うようです。
いくつかリンクがあるページで、一部のリンクにパスワードをつけたいと思っています。
ただし、全てのリンクでパスワードは同一で、リンク先は別にしたいのです。

[yambejp]

> 一部のリンクにパスワードをつけたい

そういうふうに書いてあります
class="target"がついているアンカーにしか反応しないはずですが？

[aaaaMAX]

同一のパスワードでリンク先を別にしたいのです

[yambejp]

> 同一のパスワードでリンク先を別にしたいのです

どういうロジックかわかりません。
同じものをどうやって別だと判断するのでしょうか？

[aaaaMAX]

html上で別個のidやclassを指定し、「パスワード+id名やclass名+.html」のページに飛ぶようにしたいと考えておりました