JavaScript Input text per value attribute in onClick

Question

I wanted to input the number which I click to the text box from the attribute value present on that number.

If I click number 1 then the value is number 1 and so on.

This is my script:

 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="">

Answer 1

You need to get the value of the clicked link. Get all the <a> in javascript using querySelectorAll() and then loop through them and addEventListener to them.

Use the eventObject e and get the attribute value of the clicked link

 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="">

Answer 2

You can implement this by passing the dom element directly to the function like this:

 function myFunc(elem) { var de = elem.getAttribute("value"); document.getElementById("text_id").value = de; return false; }

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

Answer 3

Check my answer below

HTML

<div id="parent">
  <a  class="list-group-item" value="1" href="#" >1</a> 
  <a  class="list-group-item" value="2" href="#" >2</a> 
  <a  class="list-group-item" value="3" href="#" >3</a> 
  <a  class="list-group-item" value="4" href="#" >4</a>
</div>

this value: <input type="text" id="text_id" value="">

Javascript

var parent = document.querySelector("#parent");
var input = document.querySelector("#text_id");

parent.addEventListener("click", function(e){
        input.value = e.srcElement.getAttribute("value");
})

Mine is a bit different because it uses event delegation, ie. you only need to listen to parent elements click rather than each anchor element's click. I personally feel it's a cleaner approach and efficient.