Deleting data and get ID of button

January 20, 2022

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…

>Solution :

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