Button click event binding in Electron js

2020-02-27 11:35发布

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>

标签： node.js electron

1条回答

女痞

2楼-- · 2020-02-27 12:42

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()
})

0人赞添加讨论(0) 举报

Button click event binding in Electron js

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间