Javascriptで機能を追加したら１つ目の機能が効かなくなったときに確認したいこと・解決策

今回のJSの記述は以下の通りです。

もともとドロワーの記述があったのですが、ポップアップの記述をしたところ、ポップアップは動作するのにドロワーが動かなくなるという問題が発生しました。

問題のコード

window onloadを２つ記述してしまっています。これがNGです。

<script>
	window.onload = function() {
		// ドロワーの記述
	};
</script>

<script>
	window.onload = function() {
		// ポップアップの記述
	};
</script>

上記問題コードの原因は、window.onload に複数の関数を割り当てることで、後に定義されたものが前に定義されたものを上書きしてしまうことです。

2つの window.onload がある場合、後（この場合ポップアップの記述）に定義されたものが最終的に実行されます。そのため、1つ目のスクリプトで定義されたドロワーの動作が上書きされてしまい、ドロワーが開かなくなります。

解決策は、1つの window.onload イベント内で2つのスクリプトを1つにまとめて、機能を実行するようにします。

以下の通り別々のwindow.onload に記述していた記述を１つのwindow.onload の中にまとめてしまいます。これで解決！！以上！

<script>
  window.onload = function () {
    // ドロワーの記述
    // ポップアップの記述
  };
</script>