How can I populate a form field from a list of elements in JavaScript?

Question

I've got a fantasy football project that I built in Django that generates a list of HTML elements. Like this...


        {% for q in QBpage %}
        
            {{ q.player_name }}
            
             {{ q.team }} 
             {{ q.position }}  
            {{ q.points }}
        
        {% endfor %}

It's a list of players (all quarterbacks) pulled from an API. What I'm trying to do is from each player's corresponding "Add" button, is add that player's name to a form field that's also on the same page. I can do that using this JavaScript function...

function selectPlayer (){
    let d = document.getElementById("qbname");
    document.getElementById("QB_name").value = document.getElementById("qbname").innerHTML;
}

Problem is though, I can only get the name of the first player in the list because all players end up with the same id. Therefore, you can only retrieve the first element. Even if I click on a player further down the list, that first player's name is the only one that is returned. Assigning a class won't work because, as far as I understand, you can only "getElementsByClass" so you end up retrieving all the members in the list instead of just one.

How would I go about solving this? I'm pretty sure I'm completely overthinking it and there's a simple solution that I'm just not seeing due to frying my brain on this for ages. Any advice is appreciated.

user_10606400 · Answer

If you have that value as data-attribute inside your button you can simply use this.getAttribute("attrname") or else use el.closest("tr").children[0].textContent where children[0] represent first td .

Demo Code :

function selectPlayer(el) {
  document.getElementById("QB_name").value = el.getAttribute("data-player-name")
  //or 
  console.log(el.closest("tr").children[0].textContent.trim())
  //or
  console.log(el.closest("tr").querySelector(".qbname").textContent.trim())
}


  

    
      
        abc
      
      
      
      
         {{ q.team }} 
      
      
         {{ q.position }} 
      
      
        {{ q.points }}
      
    
    
      
        abc2
      
      
      
      
         {{ q.team }} 
      
      
         {{ q.position }} 
      
      
        {{ q.points }}

How can I populate a form field from a list of elements in JavaScript?

1 Answers