Tengo una tabla que extrae datos de firebase:
r.insertCell(23).innerHTML = doc.data().username; r.insertCell(24).innerHTML = doc.data().uid; r.insertCell(25).innerHTML ='<button onclick="activateUserInTable('+doc.data().uid +')">Activate User</button>';tengo una función:
function activateUserInTable(userId) { db.collection("users").doc(userId).update({ activated: 1, }); }Tengo un botón en mi tabla:
r.insertCell(25).innerHTML ='<button onclick="activateUserInTable('+doc.data().uid +')">Activate User</button>'; Estoy tratando de pasar doc.data().uid al botón de arriba en la tabla.
Pero esto no parece funcionar. Esta función funciona si está fuera de la tabla y paso manualmente un uid . Quiero poder pasar los datos de firebase a la función mientras el botón está en la tabla.
Es mejor evitar configurar controladores de eventos a través de texto asignado a atributos onxyz . Tiene varios problemas, entre ellos, que debe crear el texto correctamente (las comillas se confunden fácilmente o no coinciden), el navegador debe analizarlo como código y cualquier función que use debe ser global.
En su lugar, solo use una función que cree en ese momento y adjúntela a través de addEventListener :
r.insertCell(23).innerHTML = doc.data().username; r.insertCell(24).innerHTML = doc.data().uid; const button = document.createElement("button"); button.type = "button"; button.addEventListener( "click", activateUserInTable.bind(null, doc.data().uid) ); button.textContent = "Activate User"; r.insertCell(25).appendChild(button); (He usado bind allí, por lo que estamos capturando el valor de doc.data().uid a partir del momento en que creamos la función, no más tarde cuando se llama a la función).
Dicho esto, creo que evitaría llamar repetidamente a doc.data() . Además, evitaría la vulnerabilidad XSS que podría proporcionar el tratamiento del nombre de username como HTML (y lo mismo para uid , aunque supongo que es un vector menos probable) tratándolos simplemente como texto a través de textContent en lugar de innerHTML . Algo como esto:
const { username, uid } = doc.data(); r.insertCell(23).textContent = username; r.insertCell(24).textContent = uid; const button = document.createElement("button"); button.type = "button"; // I added this, it wasn't in your HTML, but note that // the default `type` of `button` elements is // `"submit"`. Only matters if this is in a `form`... button.addEventListener("click", () => { activateUserInTable(uid); }); button.textContent = "Activate User"; r.insertCell(25).appendChild(button); (No necesito bind allí y puedo usar la función de flecha [en mi humilde opinión] más fácil de leer porque ya hemos capturado el valor de doc.data().uid a la constante uid ).