onclick を使用すると、ユーザースクリプトで「キャッチされない参照エラー: 関数が定義されていません」エラーが発生するのはなぜですか? どのように修正すればよいですか?

Uncaught ReferenceError: Function Not Defined with OnClick

ユーザー スクリプトを使用して Web サイトにカスタム エモートを追加しようとすると、「Uncaught ReferenceError: onclick 属性を持つボタンをクリックすると、「関数が定義されていません」というメッセージが表示されます。

問題の理解

ユーザー スクリプトはサンドボックス環境で動作するため、ターゲット Web ページのスコープ内に存在する関数に直接アクセスできません。 onclick 属性はこの Web ページ スコープを利用するため、ユーザー スクリプトで使用すると失敗します。

解決策: addEventListener() を使用する

この問題を解決するには、onclick() および同様の属性の使用を避けてください。ユーザースクリプトで。代わりに、この目的のために addEventListener() メソッド (または jQuery .on() などの同等のライブラリ関数) を選択します。

コードの書き換え

たとえば、onclick を使用した次のコード:

something.outerHTML += '<input onclick="resetEmotes()">

addEventListener() を使用して書き換えることができます:

something.outerHTML += '<input>

ループとイベント リスナーの変更

さらに、次のようなコードを使用してイベント リスナーにデータを直接渡すことは避けてください。

emoteTab[2].innerHTML += '<span>

代わりに、以下に示すように、データ属性を使用してイベント リスナーを個別に追加します。

for (i = 0; i < EmoteURLLines.length; i++) {
  if (checkIMG(EmoteURLLines[i])) {
    emoteTab[2].innerHTML += '<span>

appendEmote 関数内:

function appendEmote(zEvent) {
  var emoteUsage = this.getAttribute("data-usage");
  shoutdata.value += emoteUsage;
}

警告

同じ ID を複数の要素に再利用することは無効です。これは、各ページに特定の ID のインスタンスを 1 つだけ含めることができます。

また、.outerHTML または .innerHTML を使用すると、既存のイベントが削除されるため注意してください。影響を受けるノードのハンドラー。

以上がonclick を使用すると、ユーザースクリプトで「キャッチされない参照エラー: 関数が定義されていません」エラーが発生するのはなぜですか? どのように修正すればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。