この質問にはすでに答えがあります:
JavaScript における変数のスコープは何ですか?
(回答数 27)
3 年前
に閉店しました。
このページを読むと、ここで設定したハンドラーのような「onclick」ハンドラーを実行できないことがわかりました。
function handler() {
console.log(5);
}
<button onclick="handler()"></button>
これは私が使用する唯一のモジュールです: <script type="module&引用; src="../js/js_test.js"></script>。ヘッダーにあります。
これは私が受け取るエラーです:
これをモジュールに含めると機能します:
let button = document.querySelector('button');
button.onclick = handler;
何かアイデアはありますか?
追記コンソール上のモジュールに書き込んだ変数にアクセスできません。一度はこれができると思っていました。役立つかどうかはわかりません。
スクリプト ファイルがそのページに読み込まれていることを確認しますか?スクリプトはページの先頭に追加されますか?
– いつも助けてくれる
2020 年 9 月 5 日午前 1 時:22
モジュールの紹介をご覧ください。一部のエクスポートとインポートが不足しています。
– ドミニク・フォルティン
2020 年 9 月 5 日 1:24
@AlwaysHelping はい
– トニトーン120
2020 年 9 月 5 日 1:24
1
(1) Inline ハンドラーはグローバル変数のみを参照できます (2) モジュールのトップレベルはグローバルではありません。したがって、別の方法を見つける必要があります。できればインライン ハンドラーを回避することです。 JS 経由でリスナーをアタッチします。代わりに、.onclick = handler を割り当てるか、button.addEventListener('click', handler) を使用して、最後のコード スニペットを使用してください。これにより、スコープの問題が正常に回避されます。
– あるパフォーマンス
2020 年 9 月 5 日 2:03
1
トップレベルの変数は次のとおりですグローバル識別子 (どの変数名がどの値にバインドされているかを確認するときに JS が参照する最上位の LexicalEnvironment に入れられます)、その結果、ページ上のあらゆるものから参照できるようになります。変数がvarで宣言されている場合、または関数宣言である場合は、グローバルオブジェクト（ウィンドウ）のプロパティとしても自動的に追加されます。ウィンドウ上のプロパティは「グローバル」です。つまり、どこでも参照できるということです。これはグローバル ID とまったく同じというわけではありませんが、ほとんどの場合は同じであると考えられます。
– あるパフォーマンス
2020 年 9 月 5 日 2:22
------------------------
エクスポートとインポートを使用することもできます。関数をエクスポートして別のファイルにインポートする
1
何をエクスポートすることをお勧めしますか?また、どこにインポートすることをお勧めしますか?
– トニトーン120
2020 年 9 月 5 日 1:35
------------------------
js_test.js では次のようにします
export function handler() {
console.log(5);
}
HTML 内で行う
<html>
</head>
<script type="module" src="../js/js_test.js"></script>
<script type="module">
import {handler} from '../js/js_test.js';
document.onload = function(){
document.getElementById('myButton').addListener("click", handler);
};
</script>
</head>
<body>
<button id="myButton"></button>
</body>
</html>
Aks Jacoves の提案に従って編集
モジュールを実行する古い方法は次のとおりです
js_test_old.js では次のようにします
(function _module_x (global) {
global.myNamespace = global.myNamespace || {};
global.myNamespace.handler = _handler_;
function _handler_ () {
console.log(5);
}
})(window); // or })( (function(){return this;})() ); // this works for both Node.js and html
HTML 内で行う
<html>
</head>
<script src="../js/js_test_old.js"></script>
</head>
<body>
<button onclick="myNamespace.handler()"></button>
</body>
</html>
4
ありがとう。 「モジュール外の import ステートメントは使用できません」というエラーが発生する
– トニトーン120
2020 年 9 月 5 日 1:39
タイプ="モジュール" を追加します。 2 番目のタグ <script>
– アクス・ジェイコブス
2020 年 9 月 5 日 1:41
私の投稿と同じエラーがまだ発生します。モジュールの場合、.html ファイル内の属性の値としてハンドラーを参照することは、ハンドラーが「インライン」として存在する場合にのみ機能することを意味するのでしょうか。 javascript (.html ファイル内の script タグの内容)?それは迷惑そうですね！モジュールを通常のスクリプトに変換すると機能するようになります
– トニトーン120
2020 年 9 月 5 日 1:47
@tonitone120 はい、ハンドラーはスクリプト タグ内でのみ表示されます。ただし、リスナー (つまり、イベント ハンドラー) を追加できます。
– ドミニク・フォルティン
2020 年 9 月 5 日 2:46
------------------------
HTML 要素の読み込みが完了したら、必ずリスナーを追加してください
document.onload = function(){
function handler(){
console.log(5);
}
}
1
これは明らかに機能しません。ハンドラは onload の外部では表示されません。
– ドミニク・フォルティン
2020 年 9 月 5 日 1:20
