Estoy tratando de crear un programa que lea datos de una base de datos y los incluya en una página. Todo funciona bien, solo que ahora tengo un problema al eliminar datos.
Se enumerarán los datos de la base de datos y se les agregará un botón de eliminación. Cada botón tiene el mismo id que data. Cuando presiono el botón, la función con el parámetro id debe iniciarse usando onclick.
Pero me sale este error:
index.html:1 Error de referencia no capturado: answer_click no está definido en HTMLButtonElement.onclick (index.html:1:1)
Mi código:
<script type="module"> window.onload = products; const issuesRef = ref(db, 'student'); var id = 0; function products() { onValue(issuesRef, (snapshot) => { snapshot.forEach(snap => { const issue = snap.val(); var id_2 = document.createElement("div"); var div = document.createElement("div"); var div2 = document.createElement("div"); var div3 = document.createElement("div"); var div4 = document.createElement("div"); var buttn = document.createElement("button"); buttn.setAttribute("id", issue.RollNo); buttn.setAttribute("onclick", "reply_click(this.id)"); function reply_click(clicked_id){ console.log(clicked_id); } id_2.innerHTML = ++id; div.innerHTML = issue.NameOfStd; div2.innerHTML = issue.Gender; div3.innerHTML = issue.RollNo; div4.innerHTML = issue.Section; buttn.innerHTML = "delete"; document.body.appendChild(id_2) document.body.appendChild(div); document.body.appendChild(div2); document.body.appendChild(div3); document.body.appendChild(div4); document.body.appendChild(buttn); }) }); } </script>Creo que el problema está en la función answer_click() y en buttn.setAttribute...
En primer lugar, las funciones por defecto funcionan como local variables , definir una función en el ámbito de otra función la convierte en una función local, esto no es una buena práctica pero se puede hacer.
Ahora sobre el motivo del error, onclick está buscando una función global que no existe, de hecho lo recomendable es usar addEventListener .
También debo decir que no se recomienda usar var , lea: https://phoenix35.js.org/good-practices.html
const buttn = document.createElement("button"); buttn.id = issue.RollNo buttn.addEventListener("click", function(event) { // all events pass the Event object as first parameter to the callback // Event objects has a target property pointing to the HTMLElement who fired the event // HTMLElement has attributes as properties so you can get the id by event.target.id console.log(event.target.id); }); /* works too but not recommended: buttn.onclick = function(event) { console.log(event.target.id); } */Referencias: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Event
https://developer.mozilla.org/en-US/docs/Web/API/Event/target
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
Mueva el answer_click del alcance de la función de productos al alcance global ya que onClick está buscando la función en el alcance global.
<script> window.onload = onLoadListener; function onClickListener(id) { console.log(id); } function onLoadListener() { var buttn = document.createElement("button"); buttn.innerHTML = "CLICK"; buttn.setAttribute("id", '123'); buttn.setAttribute("onclick", "onClickListener(this.id)"); document.getElementById("app").append(buttn); } </script>En primer lugar, el atributo id no toma el valor como números, por lo que debe poner como id = btn-1