Undefined Function Even though I defined it in Javascript

Question

I'm trying to solve my assignment in NodeJs and Electron, I have an array of data in Main.js file and retrieve it to the index.html using IPC methods. There are also a button in every record/row of data and I want to set a function on this button by onclick attribute. But this gives me error when I clicked the button that function is not defined. My Code:

function myfun(){
    console.log("not working");
}
ipc.send("requestFileData");
ipc.on("responseFileData",(event,data)=>{

        // var htmldata = "";
        data.forEach(myFiles => {
            contentsTable.append(`
            <tr id="${myFiles.id}">
            <td>${myFiles.id}</td>
            <td>${myFiles.file_name}</td>
            <td><button id="${myFiles.id}" onclick="myfun()">Edit Image</button></td>
            </tr>
            `);
        });
});

when I clicked on the Edit Image button this gives me error:

Uncaught ReferenceError: myfun is not defined at HTMLButtonElement.onclick (index.html:1)

Don't think I can help much, at least because I have no idea what the ipc stuff does. This I _can_ say - you've got a duplicate id (the tr and the button in the same tr) which is not allowed and might cause trouble. — , Apr 15 '20 at 18:03
Does this answer your question? [Uncaught ReferenceError: function is not defined with onclick](https://stackoverflow.com/questions/17378199/uncaught-referenceerror-function-is-not-defined-with-onclick) — Anurag Srivastava, Apr 15 '20 at 18:04
@Yishmeray I have also removed the id from the tr tag but it still give me the same error that myfun() is not defined. IPC (Inter-process communication) it is a nodeJs module that is used for communicate with main and rendered processes. I hope you will find much more about IPC by some little searching.. — Jawad Saqib, Apr 15 '20 at 18:06
Great suggestion @AnuragSrivastava. I think you've found something that should help the OP. It also agrees with me about unique ids, which means it is obviously right since it agrees with me :) — , Apr 15 '20 at 18:07
The error would seem to suggest that the function is not in the global scope. — Taplar, Apr 15 '20 at 18:08
@Yishmeray True that, good sir :) The better solution is to use dynamic handlers with unique ids ofcourse — Anurag Srivastava, Apr 15 '20 at 18:08
I used to add a class for each eelement added and when everything is added use a Jquery class selector to add an event Listener. — Alain BUFERNE, Apr 15 '20 at 18:28

score 0 · Answer 1 · answered Apr 16 '20 at 13:53

At last I have find the solution, which i would like to share:

ipc.on("responseFileData",(event,data)=>{

        contentsTable.html("");
        data.forEach(myFiles => {
            contentsTable.append(`
            <tr>
            <td>${myFiles.id}</td>
            <td class="fields">${myFiles.file_name}</td>
            <td><button class="clickedit" id="${myFiles.id}">Edit Image</button></td>
            </tr>
            `);
        });
        let editBtn = document.getElementsByClassName("clickedit");

        for(let i = 0; i < editBtn.length; i++) {
            editBtn[i].addEventListener("click", function() {
              var editId = editBtn[i].id;
              console.log(editId);
            });
          }
        });

Undefined Function Even though I defined it in Javascript

1 Answers1