Estoy creando una tabla según el resultado de una función para luego agregarla en un div como este:
let result = document.getElementById("result"); consultCities(); function consultCities (){ consultarAPI(username, password, "cities") .then((response) => { if(response.login !== "Fail"){ let table = ""; let thead = ""; let tbody = ""; thead += `<tr> <th>Citie</th> <th>Dane</th> <th>Look Institution</th> </tr>` for(let i = 0; i < response.data.length; i += 1 ){ tbody += `<tr> <td>${response.data[i].name}</td> <td>${response.data[i].dane}</td> <td><button type="button" id="ver" onclick="${consultInstitutions(response.data[i].dane)}">Ver</button></td> </tr>` } table += `<table class="table table-bordered"> <thead> ${thead} </thead> <tbody> ${tbody} </tbody> </table>` result.innerHTML = table; }else{ alert("El Usuario no existe o la opción no existe"); } }); } function consultInstitutions(codCity){ console.log(codCity); }El problema es que el disparador onclick se ejecuta automáticamente aunque no hago clic en ningún botón, mi pregunta es ¿hay una mejor manera de configurar onclick en un botón para una cadena?
Creo que el problema aquí es que está ejecutando la función inmediatamente colocándola dentro ${} . En su lugar, solo desea colocar la variable dentro de ${} .
onclick="consultInstitutions(${response.data[i].dane})"Aquí hay una versión alternativa de su script. Me tomé la libertad de inventar algunos datos de prueba para convertirlo en un MCVE.
const D={login:"OK",data:[ {name:"Rome",dane:"Gio"}, {name:"Kiev",dane:"Ivan"}, {name:"Paris",dane:"Lorraine"}, {name:"Ohio",dane:"Matt"}, {name:"Minsk",dane:"Sergey"}]}, tbl = document.getElementById("result"); tbl.innerHTML=makeTable(D); tbl.onclick=ev=>{ if(ev.target.tagName==="BUTTON") console.log(ev.target.closest("td").previousElementSibling.textContent) } function makeTable(resp){ if(resp.login !== "Fail") return `<table class="table table-bordered"><thead><tr><th>Citie</th><th>Dane</th><th>Look Institution</th></tr></thead><tbody>` + resp.data.map(r=> `<tr><td>${r.name}</td><td>${r.dane}</td><td><button type="button">Ver</button></td></tr>`).join("\n") + "</tbody></table>"; else alert("El Usuario no existe o la opción no existe"); } <div id="result"></div> Utilicé un manejo de archivos adjuntos delegado: el elemento <table> escucha el evento de clic, pero la acción solo ocurre si el elemento en el que se hizo clic ( ev.target ) resulta ser un "BOTÓN". En ese caso, la función busca el contenido de texto del elemento <TD> anterior y cinsole.log() lo selecciona. Haciéndolo de esta manera, puedo mantener las cadenas de plantilla HTML en mi función de generador de marcado makeTable() muy simple.