Estoy tratando de implementar un tablero en javascript y tengo algunos problemas con uno de los componentes.

Mi código recibe una lista de servidores de una API, y creo y copio un elemento de lista para cada uno.

 for (var i = 0; i < userData.servers.length; i++) { var server = userData.servers[i]; var clone = serverElement.cloneNode(true); var serverImage = clone.getElementsByClassName("server-image")[0]; var serverName = clone.getElementsByClassName("server-name")[0]; var serverSelect = clone.getElementsByClassName("server-select")[0]; serverName.innerText = server.name; serverImage.src = "https://cdn.discordapp.com/icons/" + server.id + "/" + server.icon + ".png?size=128"; serverSelect.innerText = "Select"; serverSelect.onclick = () => { setPremiumServer(server.id) }; serverList.appendChild(clone); }

Sin embargo, surge un problema con la configuración de la función onclick del botón 'serverSelect'.

 serverSelect.onclick = () => { setPremiumServer(server.id) };

Cuando se presiona un botón en uno de los elementos de la lista, quiero que llame a 'setPremiumServer' con el parámetro como ID correspondiente al servidor representado por el elemento de la lista.

La forma en que intenté hacer esto fue creando una instancia de una función, con el valor establecido dentro de ella.

Sin embargo, parece que este código no se evalúa hasta que se presiona el botón, momento en el que llama a setPremiumServer() con la ID del servidor que aparece en último lugar en la lista.

¿Cómo solucionaría esto y haría que llamara correctamente a la función con el ID del servidor representado por el elemento de la lista?