web-dev-qa-db-ja.com

Electron jsのボタンクリックイベントバインディング

Electron jsを使用してデスクトップアプリケーションを開発し始めました。

他の操作を実行できるように、ボタンクリックイベントをjavascript関数にバインドする方法を知りたい。

以下の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>

私のrenderer.jsコードは次のようになります。

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

しかし、私は次のエラーを受け取っています：

キャッチされないReferenceError：getDataはHTMLInputElement.onclickで定義されていません

私は何か間違っていますか？

更新

HTMLドキュメントを更新し、require（）メソッドとその動作を削除しました：

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

これを将来のユーザーに説明するため。 HTMLドキュメント内の_<script>_タグはグローバルスコープで実行されます。つまり、_this === window_、つまりスクリプトで宣言された関数または変数は、本質的にグローバルになります。

スクリプトをrequireすると、独自のコンテキストで分離されます（別の関数でラップされるため、_this !== window_、つまり、スクリプトで宣言された関数または変数はグローバルに使用できません。

これを行う正しい方法は、require('./renderer.js')を使用し、このコードを使用することです

_function getData() {
    ...
}

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