JavaScript｜ボタンをクリックしたタイミングで複数のscriptタグを読み込むスクリプトを書いてみた

クリックしたタイミングでscriptタグを読み込んで実行したいときって時々ありますよね。

addEventListenerを使う

HTML

<button id="クリック対象のID名">任意の文言</button>

JavaScript

document.getElementById('クリック対象のID名').addEventListener('click', function() {
  let srcs = ['https://XXX.XXX(外部リソースも可)','js/(追加したいファイル).js'];
  for(let i=0;i<srcs.length;i++) {
    let s = document.createElement('script');
    s.async = false; // *1
    s.src = srcs[i];
    //let a = document.getElementById('追加対象のID名'); // *2
    //a.appendChild(s); // *3
    document.body.appendChild(s); // *4
  }
});

関数化＆onclickを使う

HTML

<button onclick="append_scripts();">任意の文言</button>

JavaScript

function append_scripts() {
  let srcs = ['https://XXX.XXX(外部リソースも可)','js/(追加したいファイル).js'];
  for(let i=0;i<srcs.length;i++) {
    let s = document.createElement('script');
    s.async = false;
    s.src = srcs[i];
    //let a = document.getElementById('追加対象のID名');
    //a.appendChild(s);
    document.body.appendChild(s);
  }
}

備考：
*1）配列の順番通りに実行するための設定
*2）任意の場所に追加するときはここで該当のID名を取得
*3）任意の場所に追加したいときはコメントオフ
*4）bodyの閉じタグ直前に追加（*3利用時は削除）

参考リンク