Electron.js Function is not defined-CodePudding

I'm generating dynamic table using JavaScript with a "getCutomerEmail" button on last column of each row. Now i want to extract email value when click on "getCutomerEmail" button on the same row.

I declared two functions on Preload.js to extract email and send it to the main.js for further processing:

function  getEmail (el)  {
  const tr = el.closest("tr");
  const tds = tr.getElementsByClassName('email');
  const emailAddress = tds[0].innerHTML;
  console.log(emailAddress);
  ipcRenderer.send("ClickRunCH", emailAddress);

}

window.addEventListener('DOMContentLoaded', () => {
function renderCustomers(tasks) {
customerList.innerHTML  = `
    <tr >
        <th >Name</th>
        <th >Email</th>
        <th >Contacts</th>
        <th >Address</th>
        <th >Country</th>
        <th >Action</th>
    </tr>`;    
tasks.forEach((t) => {
  customerList.innerHTML  = `
    <tr >
        <td >${t.Name}</td>
        <td >${t.Email}</td>
        <td >${t.Contacts}</td>
        <td >${t.Address}</td>
        <td >${t.Country}</td>
        <td ><button  onclick="getEmail(this)">
            Get Customer Email
        </button></td>
    </tr>`;
});

})

But i'm getting this error message:

ReferenceError: getEmail is not defined
    at HTMLButtonElement.onclick

Any help is really appreciated, thnx for reading

CodePudding user response：

If you are receiving an error message stating that a function is not defined, it means that the function has not been declared or created in your code. This error typically occurs when you are trying to call or use a function that does not exist. To fix this error, you will need to define the function in your code before attempting to call it. This can be done by declaring the function and its parameters, as well as providing the necessary code for the function to execute. Once the function has been defined, you should be able to call it without encountering the error message.

The error message indicates that the "getEmail" function is not defined. This can happen for several reasons, such as if the function is not declared in the same scope as the code that is trying to call it, or if the function has not been defined at all.

To fix this error, you can try the following steps:

Make sure that the "getEmail" function is declared in the same scope as the code that is trying to call it. In your code, the "getEmail" function is defined inside the "renderCustomers" function, so it will only be available within that function. If you want to call the "getEmail" function from outside the "renderCustomers" function, you will need to move the function declaration outside of the function so that it is in the same scope as the code that is trying to call it.

Make sure that the "getEmail" function is defined before the code that is trying to call it. In your code, the "getEmail" function is defined after the code that is trying to call it, so the code will try to call the function before it has been defined. To fix this, you can move the function declaration above the code that is trying to call it, so that the function is defined before the code tries to call it.

Check the spelling and case of the function name. In your code, the "getEmail" function is declared with a lowercase "g" in the function name, but the code that is trying to call it is using an uppercase "G" in the function name. This will cause the error, as JavaScript is case-sensitive and will not recognize the function if the case of the function name does not match exactly. To fix this, you can either change the spelling of the function name in the code that is trying to call it to match the spelling of the function declaration, or you can change the spelling of the function declaration to match the spelling of the code that is trying to call it.

By following these steps, you should be able to fix the "ReferenceError: getEmail is not defined" error and successfully call the "getEmail" function in your code.

CodePudding user response：

Functions cannot be accessed from other files unless they are exported from the file where they are defined & imported in the file where they are used.

You need to use export keyword in preload.js...

export function  getEmail (el)  {
  const tr = el.closest("tr");
  const tds = tr.getElementsByClassName('email');
  const emailAddress = tds[0].innerHTML;
  console.log(emailAddress);
  ipcRenderer.send("ClickRunCH", emailAddress);

}

In main.js (where function is used) you need to import it

import {getEmail} from 'preload.js'

But you need to provide the path if preload.js & main.js are not in the same directory.

import {getEmail} from 'otherPath/preload.js'

that will depend entirely on where the files are in relation to each other.