htmlのonclickについて

●やりたい事
以下の1入力方法のb一覧選択から「11」をonclickにて選択した時に、2結果に「11」と表示させたい

●質問
以下の1入力方法の直接入力から入力した値は、2結果にそのまま表示されますが、上記やりたい事が2結果に表示されません。
何処を修正すれば良いのでしょうか？

<!DOCTYPE html><html>
<head>
  <meta charset="UTF-8">
</head>
<body>
1入力方法
<form action="#">

a直接入力
<p><input type="text" value="" onkeydown="fCopy(this.form)" onkeyup="fCopy(this.form)" name="txt" /></p>


b一覧選択
<p name="txt" onclick="fCopy(this.form)" value="11">11</p>
<p name="txt" onclick="fCopy(this.form)" value="22">22</p>

<hr>
2結果：
<p><input type="text" value="" readonly="readonly" name="copy"/>　※（読取専用）</p>
</form>

</body>
<script type="text/javascript">
function fCopy(frmObj){
   frmObj.elements["copy"].value=frmObj.elements["txt"].value;
}
</script>

</html>

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  [].forEach.call(document.querySelectorAll('.txt'),function(x){
4    ["click","input"].forEach(function(y){
5      x.addEventListener(y,function(e){
6        var v=(x.nodeName=="INPUT")?x.value:x.textContent;
7        document.querySelector('#copy').value=v;
8      });
9    });
10  });
11});
12</script>
131入力方法
14<form action="#">
15
16a直接入力
17<p><input type="text" value="" class="txt" /></p>
18
19
20b一覧選択
21<p class="txt" value="11">11</p>
22<p class="txt" value="22">22</p>
23
24<hr>
252結果：
26<p><input type="text" value="" readonly="readonly" name="copy" id="copy"/>　※（読取専用）</p>
27</form>