HTML スクリプト タグを使用したスクリプトのロード

HTML スクリプト タグは、JavaScript コードを含めて実行するために使用されます。デフォルトでは、このタグは JavaScript ファイルをロードするための scr などの外部ソース属性を受け取ります。ただし、次のようにスクリプト タグ内にインライン JavaScript を含めようとします:

エラーをスローせずにサイレントに失敗します。

スクリプト タグでインライン JavaScript を使用すると機能しない理由

この動作の理由は、スクリプト要素が外部またはインラインを問わず、単一のソースのみをロードします。 src とインライン コンテンツの両方が存在する場合、インライン コンテンツは無視されます。したがって:

指定されたスクリプトはロードされません。

解決策: 複数のスクリプト要素を使用する

複数のスクリプトをロードするには、それぞれに個別のスクリプト要素を使用する必要があります。

また、必要なスクリプトを動的にロードする親スクリプトを作成することもできます:

補足

インライン JavaScript は外部ソースのスクリプト要素では無視されますが、スクリプト要素のコンテンツは DOM に残ります。このため、一部の開発者は、外部スクリプトによってアクセスされるデータを保存するためにこれを使用するようになりました。ただし、この目的には通常、data-* 属性を使用する方がより適切でクリーンなアプローチです。