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>
これを将来のユーザーに説明するため。 HTMLドキュメント内の_<script>
_タグはグローバルスコープで実行されます。つまり、_this === window
_、つまりスクリプトで宣言された関数または変数は、本質的にグローバルになります。
スクリプトをrequire
すると、独自のコンテキストで分離されます(別の関数でラップされるため、_this !== window
_、つまり、スクリプトで宣言された関数または変数はグローバルに使用できません。
これを行う正しい方法は、require('./renderer.js')
を使用し、このコードを使用することです
_function getData() {
...
}
document.querySelector('#btnEd').addEventListener('click', () => {
getData()
})
_