onClickの中value属性ごとのJavaScriptの入力テキスト

矢上セル：

私がしたかったinput私はクリック数text boxからattributeその番号に存在する値。

私は数クリックすると1を、値が数である1ようにと。

これは私のスクリプトです。

function myFunc() {
  var dadada = document.getElementsByTagName("a");
  var i;
  for (i = 0; i < dadada.length; i++) {
    var de = dadada[i].getAttribute("value");
  }
  document.getElementById("text_id").value = de;

}

<div id="xxx">
  <a class="list-group-item" href="#" value="1" onclick="myFunc()">1</a>
  <a class="list-group-item" href="#" value="2" onclick="myFunc()">2</a>
  <a class="list-group-item" href="#" value="3" onclick="myFunc()">3</a>
  <a class="list-group-item" href="#" value="4" onclick="myFunc()">4</a> 
this value: <input type="text" id="text_id" value="">

Maheerアリ：

あなたは、クリックしたリンクの値を取得する必要があります。すべての取得<a>使用してJavaScriptでquerySelectorAll()それらを通過して、その後、ループaddEventListener彼らに。

EVENTOBJECTを使用eして属性を取得valueクリックしたリンクのを

const items = document.querySelectorAll('.list-group-item');
items.forEach(item => {
  item.addEventListener('click', e => myFunc(e))
})

function myFunc(e) {
    document.getElementById("text_id").value =e.target.getAttribute('value')
}

<div id="xxx">
<a  class="list-group-item" href="#" value="1">1</a> 
<a  class="list-group-item" href="#"  value="2">2</a> 
<a  class="list-group-item" href="#"  value="3">3</a> 
<a  class="list-group-item" href="#"  value="4">4</a>    
this value: <input type="text" id="text_id" value="">