HTMLで言語切り替えボタンによって読み込むファイルを変更する

Question

実現したいこと

https://github.com/snym-yt/VisualPMusic
このリポジトリのindex.htmlを編集し，ボタンによって「ブロック追加」の部分で読み込むファイルを切り替えたいです．

具体的には．
日本語選択をした際には

    <script src="blocks/js/play_block2.js"></script>
    <script src="generators/play2.js"></script>

    <script src="blocks/js/random_block.js"></script>
    <script src="generators/random.js"></script>

    <script src="blocks/js/custom_test_block.js"></script>
    <script src="generators/custom_test.js"></script>

英語を選択した際には

    <script src="blocks/js/gauss_block2.js"></script>
    <script src="generators/gauss2.js"></script>

    <script src="blocks/js/weibul_block2.js"></script>
    <script src="generators/weibul2.js"></script>

    <script src="blocks/js/randwalk_block.js"></script>
    <script src="generators/randwalk.js"></script>

のみを読み込むようにしたいです．
つまり押したボタンによって見えるブロックが変わってほしいです．

例えば日本語を選択したときは

英語を選択したときは

のようになってほしいです．

ボタンはこのサイトの一つ目のデモで示されているような，二者択一のものにしたいと考えております．

代替案

ボタンでいつでも変更できるようなものではなく，ページを開いた時に「日本語」か「英語」を選択するポップアップを表示し，選択されたものに応じて読み込むファイルを変更する，というような形式でも問題ないと考えております．

行なったこと(pushせずに開発を行なっているので，リポジトリで見れない可能性あり)

先述したボタンとは異なり，通常のよく見るボタンで「日本語」と「英語」をそれぞれ作成し，次のようなスクリプトを用いてボタンを押したら対応するリストに入れたものをを読み込ませようとしたのですが，押しても対応するものが読み込まれていませんでした．(index.htmlの対応する部分のファイル読み込みはコメントアウトしています)

function setLanguage(lang) {
  // 言語別のスクリプトのリストを定義
  const scripts = {
    ja: [
      "blocks/js/play_block2.js",
      "generators/play2.js",
      "blocks/js/random_block.js",
      "generators/random.js"
    ],
    en: [
      "blocks/js/custom_test_block.js",
      "generators/custom_test.js",
      "blocks/js/gauss_block2.js",
      "generators/gauss2.js",
      "blocks/js/weibul_block2.js",
      "generators/weibul2.js",
      "blocks/js/randwalk_block.js",
      "generators/randwalk.js"
    ]
  };

  // 言語別にスクリプトを読み込む
  const scriptList = scripts[lang];
  if (scriptList) {
    scriptList.forEach(script => {
      const scriptElement = document.createElement('script');
      scriptElement.src = script;
      document.body.appendChild(scriptElement);
    });
  }
}

    <!-- ブロック追加 -->
    <!-- <script src="blocks/js/play_block2.js"></script>
    <script src="generators/play2.js"></script>

    <script src="blocks/js/random_block.js"></script>
    <script src="generators/random.js"></script>

    <script src="blocks/js/custom_test_block.js"></script>
    <script src="generators/custom_test.js"></script>

    <script src="blocks/js/gauss_block2.js"></script>
    <script src="generators/gauss2.js"></script>

    <script src="blocks/js/weibul_block2.js"></script>
    <script src="generators/weibul2.js"></script>

    <script src="blocks/js/randwalk_block.js"></script>
    <script src="generators/randwalk.js"></script> -->

追記

エラー内容

Uncaught TypeError: window.markdownit is not a function
    at script.js:64:33
blockly_compressed.min.js:1030 Ignoring non-existent field Note No. in block play
Blockly.Xml.domToBlockHeadless_ @ blockly_compressed.min.js:1030
blockly_compressed.min.js:1030 Ignoring non-existent field during in block play
Blockly.Xml.domToBlockHeadless_ @ blockly_compressed.min.js:1030
blockly_compressed.min.js:1324 Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at Blockly.Generator.blockToCode (blockly_compressed.min.js:1324:268)
    at Blockly.Generator.workspaceToCode (blockly_compressed.min.js:1322:246)
    at myUpdateFunction (script.js:26:33)
    at Blockly.Workspace.fireChangeListener (blockly_compressed.min.js:893:446)
    at Blockly.Events.fireNow_ (blockly_compressed.min.js:1250:203)
3blockly_compressed.min.js:1074 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
2blockly_compressed.min.js:1324 Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at Blockly.Generator.blockToCode (blockly_compressed.min.js:1324:268)
    at Blockly.Generator.workspaceToCode (blockly_compressed.min.js:1322:246)
    at myUpdateFunction (script.js:26:33)
    at Blockly.Workspace.fireChangeListener (blockly_compressed.min.js:893:446)
    at Blockly.Events.fireNow_ (blockly_compressed.min.js:1250:203)

CDN

https://cdnjs.com/libraries/markdown-it
ここにmarkdownのCDNの最新バージョンが見れる．

Comments

[退会済みユーザー]

例えば、
"blocks/js/play_block2.js"
パスの位置がよく分かりません。ツリーを質問文に書いていただけませんか？
あとおそらく、chromeだとデベロッパーツールにエラーが出てるはずなのでそれもお願いします。

[Lhankor_Mhy]

ご提示のリポジトリのコードにご提示のページのコードを組み込んでみましたが、スクリプトが追加で読み込まれていることを確認しました。
どのようなところがわからないですか？

[aaaa____]

@mike2mike4さん
パス等はツリーを手打ちするよりも，記載のリポジトリを参照していただけると助かります．
また，現状HTMLで読み込む際には"./"を記述しなくても読み込めているので記述していないのですが，相対パスはこれを含めないと必ず問題が生じるのでしょうか．
エラーについては本文に追記させていただきます．
宜しくお願いいたします．

[aaaa____]

@Lhankor?Mhyさん
質問の仕方と，問題の把握が良くなかったのかもしれません．
おっしゃる通り，読み込みは出来ているようでした．
問題の本質は「日本語を選択しているときには英語のものを，英語を選択しているときには日本語のものを読み込まないようにしたい」というものでした
本文を変更させていただきます，ご指摘ありがとうございます．

[退会済みユーザー]

パスは直下にあればそれでいいです。私の思い違いです。
Uncaught TypeError: window.markdownit is not a function
at script.js:64:33というエラーは
マークダウンのCDNをHTMLに記述してないせいです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.2.2/markdown-it.min.js"></script>
8.2.2はおそらくバージョンですので、調べて最新版にされたほうがいいかと。
https://zenn.dev/yurukei20/articles/5e341723f68bae
このCDNは初見なので、これが原因かはわかりません。

[Lhankor_Mhy]

> 問題の本質は「日本語を選択しているときには英語のものを，英語を選択しているときには日本語のものを読み込まないようにしたい」というものでした

ご存知の通り、読み込まれたJavaScriptはその場で実行されますから、切り替えを実現するには『読み込まないようにしたい』というのは実際の処理ではなくて、『実行したものを原状に復したい』という処理が必要になります。

言うまでもありませんが、実行したコードの処理を原状に復するためには、原状復帰機能が実行したコード自身に実装されていなくてはなりません（いくつかのライブラリで unbind や destroy などのメソッドが実装されているのはご存知の通りです）。
ですので、ご使用のライブラリにそのような実装が存在するのか、ないのであれば自身で実装できるのか、または別のライブラリを実行した時に安全に上書きができるのか、その辺りから調査すべきことであるでしょう。

[aaaa____]

@mike2mike4さん
CDNまわりの話は知見がなかったのですが，参考サイトの提示，とても助かります．調べてみます，ありがとうございます．

[aaaa____]

@Lhankor_Mhyさん
方向性の提示，ありがとうございます．挙げていただいたメソッドを活用して実装できないか考えてみます．何か得られましたら経過は本文に追記させていただきます．
宜しくお願いいたします．

Answer 1

  <!-- 言語選択ポップアップ -->
  <div class="bg_onetime_popup" id="languagePopup">
    <div class="onetime_popup">
      <div class="onetime_popup_title">
        <span class="onetime_popup_title_close" id="popupCloseButton"></span>
        <span>言語選択</span>
      </div>
      <div class="onetime_popup_content">
        <p>Choose Language:</p>
        <button onclick="setLanguage('ja'); closePopup();">日本語</button>
        <button onclick="setLanguage('en'); closePopup();">English</button>
      </div>
    </div>
  </div>

  <script>
    window.addEventListener('load', function () {
      const body = document.querySelector('body');
      const languagePopup = document.getElementById('languagePopup');
      const popupCloseButton = document.getElementById('popupCloseButton');

      body.classList.add('open_popup');

      // ポップアップを閉じる処理
      function closePopup() {
        body.classList.remove('open_popup');
      }

      // 背景をクリックしたらポップアップを閉じる
      languagePopup.addEventListener('click', function () {
        closePopup();
      });

      // ポップアップ内のクリックイベント伝播を防ぐ
      languagePopup.querySelector('.onetime_popup').addEventListener('click', function (e) {
        e.stopPropagation();
      });

      // 閉じるボタンをクリックしたらポップアップを閉じる
      popupCloseButton.addEventListener('click', function () {
        closePopup();
      });
    }, false);

    function setLanguage(lang) {
      // 言語切り替えの処理を追加
      // ここで必要なら言語に応じた処理を実行する
      console.log('Selected language:', lang);
    }
  </script>

このような形で，ページを読み込んだ時にポップアップを出してボタンによって読み込ませることにしました．