Menu
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> 
354
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() }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
