Passing single element of an array to a click function? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Passing single element of an array to a click function? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have an object that I receive from the server and I would like to display somehow. What I am struggling, is to pass a single element to the single button. On the webpage I will be displaying a list of things related about the single player and the button. What I would like to do is, if I click on the button of something player, I would like to pass the information related to that object. But javascript says that I have an unexpected identifier as error. How can I pass a single object of an array when I click that button?

  • Example of player object
[
    {"player":"something", "help":"", "secOnTask":12}, 
    {"player":"ran", "help":"", "secOnTask":13}
]
function trialtry(player) {
    alert('hello');
    console.log(player);
}

//function that receives object players from the server
function setTPlayerTemplate(players) {
    var playerHtml = [];
    for (let index = 0; index < players.length; index++) {
        playerHtml[index] = 
            '<div class = "user">
                <button onclick="trialtry('+players[index]+')">'+players[index].player+'</button>
                <ul class="list-group">
                    <li class="list-group-item">Time: '+players[index].secOnTask+'</li>
                </ul>
            </div>'
    }
    return playerHtml;
}

Answer

By doing '...' + players[index] + '...' you are actually converting the object into a string. If your players variable is a global you can just plug the name of the variable into the html:

playerHtml[index] = '<div class = "user">
            <button onclick="trialtry(players[index])">' + // Note here there are no ''
 players[index].player+'</button>
             <ul class="list-group">
             <li class="list-group-item">Time: '+players[index].secOnTask+'</li>
            </ul>
            </div> '

Otherwise (and preferrable) you can create your element structure (with vanilla or libraries) and inject your variable into the button callback.

With vanilla would be like this:

function createPlayerElement(player) {
  var $user = document.createElement('div');
  $user.classList.add('user');

  var $button = document.createElement('button');
  button.addEventListener('click', function() { trialtry(player); });
  button.innerText = player.player;

  var $ul = document.createElement('ul');
  $ul.classList.add('list-group');

  var $li = document.createElement('li');
  $li.classList.add('list-group-item');
  $li.innerText = 'Time: ' + player.secOnTask;

  $ul.appendChild($li);
  $user.appendChild($button);
  $user.appendChild($ul);

  return $user;

}

function setTPlayerTemplate(players) {
        var playerHtml = [];
        for (let index = 0; index < players.length; index++) {
            playerElements.push(createPlayerElement(players[i]));
        }
        // Here we don't return flat HTML but the elements to be appended to your container
        return playerHtml; 
}
We are here to answer your question about Passing single element of an array to a click function? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji