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...

CodePudding user response：

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

CodePudding user response：

First of all the id attribute doesn't take the value as numbers so you need to put like id=btn-1

CodePudding user response：

Function reply_click is declared below buttn.setAttribute, since JavaScript reads the code procedurally, this function does not yet exist in the scope. Additionally, since the function is the same for each button (the ID is only a parameter), there's no need to declare this inside the forEach at all.

Try putting the reply_click function in the global scope, above the products() function.

function reply_click(clicked_id) {
    console.log(clicked_id)
}


function products() {
...

CodePudding user response：

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 = onl oadListener;
     function onClickListener(id) {
       console.log(id);
     }
    function onl oadListener() {
       var buttn = document.createElement("button");
       buttn.innerHTML = "CLICK";

       buttn.setAttribute("id", '123');
       buttn.setAttribute("onclick", "onClickListener(this.id)");
       document.getElementById("app").append(buttn);
   }
 </script>