Button click event binding in Electron js

Question

I have started using electron js to develop desktop application.

I want to know that how to bind button click event with javascript function so that I can perform other operation.

I used below HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Manav Finance</title>
  </head>
  <body>
    <input type="button" onclick="getData()" value="Get Data" />
  </body>

  <script>
    // You can also require other files to run in this process
    require('./renderer.js')
  </script>
</html>

My renderer.js code looks like this:

function getData(){
        console.log('Called!!!');
    }

But I am getting error that:

Uncaught ReferenceError: getData is not defined at HTMLInputElement.onclick

Am I doing something wrong?

Update

Updated HTML document and removed require() method and its working now:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Manav Finance</title>
    <script src="renderer.js"></script>
  </head>
  <body>
    <input type="button" id="btnEd" value="Get Data" onclick="getData()" />
  </body>
</html>

Try moving the `script` tag above `body`. The issue right now is your script where your function is being defined is being defined after the DOM has rendered input so naturally it will not know how to bind the click event if it doesn't exist. — aug, Mar 29 '17 at 19:22

score 36 · Accepted Answer · edited Jan 27 '19 at 18:16

36

To explain this for future users. <script> tag's in an HTML document are executed in the global scope, this means that this === window, I.e. any function or variable declared in the script inherently becomes global.

When you require a script it becomes isolated in it's own context (it is wrapped in another function so this !== window, I.e. any function or variable declared in the script is not available globally.

The correct way to do this is to use require('./renderer.js') and to use this code

function getData() {
    ...
}

document.querySelector('#btnEd').addEventListener('click', () => {
    getData()
})

edited Jan 27 '19 at 18:16

Phil O.

575
4
7

answered Apr 02 '17 at 07:09

MarshallOfSound

2,629
1
20
26

5

how do you use the event argument in electron? – oldboy Oct 06 '19 at 04:25
3

Where should one add the `require` statement to, in this example? – Raleigh L. Apr 15 '22 at 07:24

Button click event binding in Electron js

1 Answers1

Linked