HTML 要素のクリック時にユーザースクリプトで「参照エラー: 関数が定義されていません」というメッセージが表示されるのはなぜですか? どのように修正すればよいですか?

ReferenceError: HTML 要素に関数が定義されていません。

問題をクリックしてください

Web サイトにカスタム エモートを追加するユーザー スクリプトを作成しようとすると、エラーが発生しますonclick でボタンをクリックすると「Uncaught ReferenceError: function is not定義」が発生する

解決策

この問題は、ユーザー スクリプトでの onclick 属性の使用によって発生します。ユーザー スクリプトはターゲット ページとは別のサンドボックス環境で実行されるため、ユーザー スクリプト内で作成された onclick イベントはページで定義された関数にアクセスできません。

これを解決するには、onclick 属性の代わりに addEventListener() を使用することが不可欠です。これにより、イベント リスナーが正しく追加され、ユーザー スクリプト内で定義された関数にアクセスできるようになります。

例

問題を解決するコードの改訂版は次のとおりです。

// Replace onclick attribute with event listener
emoteTab[2].innerHTML += '<span>

その他の考慮事項

データ属性使用法:

以前に試みたように、イベント ハンドラーの onclick 属性内でデータを渡す代わりに、データ属性を使用して HTML 要素自体にデータを格納することをお勧めします。

ID の重複:

複数の要素に同じ ID を再利用することは避けてください。予期しない動作を引き起こす可能性がある無効な方法です。

innerHTML の上書き:

要素の innerHTML を変更すると、既存のイベント ハンドラーがすべて削除されます。したがって、HTML を変更した後にイベント リスナーを再作成することが重要です。

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