I'm trying to create a program that reads data from a database and lists it on a page. Everything works well only now I have a problem deleting data.
The data from the database will be listed and a delete button will be added to them. Each button has the same id as data. When I press the button, the function with the id parameter should be started using onclick.
But I get this error:
index.html:1 Uncaught ReferenceError: reply_click is not defined at HTMLButtonElement.onclick (index.html:1:1)
My code:
<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>
I think the problem is in the function reply_click() and in buttn.setAttribute...
First of all, functions by default work like local variables, defining a function in the scope of another function makes it a local function, this is not a good practice but it can be done.
Now about the reason for the error, onclick is looking for a global function that doesn't exist, in fact the recommended thing is to use addEventListener.
I should also say that using var is not recommended, please read:
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);
}
*/References: 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
Move the reply_click from the scope of products function to global scope since onClick is looking for function in global scope.
<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>
First of all the id attribute doesn't take the value as numbers so you need to put like id=btn-1