web-dev-qa-db-fra.com

Liaison d'événement de clic de bouton dans Electron js

J'ai commencé à utiliser electron js pour développer une application de bureau.

Je veux savoir comment lier un événement de clic de bouton avec la fonction javascript afin de pouvoir effectuer d'autres opérations.

J'ai utilisé ci-dessous le code HTML:

<!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>

Mon code renderer.js ressemble à ceci:

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

Mais je reçois une erreur qui:

Uncaught ReferenceError: getData n'est pas défini dans HTMLInputElement.onclick

Est-ce que je fais quelque chose de mal?

Mise à jour

Document HTML mis à jour et méthode require () supprimée et son fonctionnement maintenant:

<!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.jselectron
14
Manprit Singh Sahota

Pour expliquer cela aux futurs utilisateurs. Les balises <script> Dans un document HTML sont exécutées dans la portée globale, cela signifie que this === window, C'est-à-dire toute fonction ou variable déclarée dans le script devient intrinsèquement globale.

Lorsque vous require un script, il devient isolé dans son propre contexte (il est encapsulé dans une autre fonction donc this !== window, C'est-à-dire que toute fonction ou variable déclarée dans le script n'est pas disponible globalement.

La façon correcte de le faire est d'utiliser require('./renderer.js') et d'utiliser ce code

function getData() {
    ...
}

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