javascriptのプログラムで、選択肢の結果ごとに、異なるジャバスクリプトを呼び出すようにしたいです。

Question

<script type="text/javascript">
// ◆◆◆ファンクション名◆◆◆
function keisan() {
// ◆◆◆3種類のエリアを選択◆◆◆
var area={"area1":1,"area2":2,"area3":3};
var selectarea = area[document.querySelector('#area').value];
// ◆◆◆エリア選択結果◆◆◆
if (selectarea == 1){
<script src="test1.js"></script>　　⇐　選択肢ごとに異なるスクリプトを呼び出すようにしたいが、どうコードを書けば良いか分からない！
  }
else if (selectarea == 2){
<script src="test2.js"></script>　　⇐　同上
  }
else if (selectarea == 3){
<script src="test3.js"></script>　　⇐　同上
  }
</script>

<form>
<div class="dottbox">
エリアを選んでください
↓　↓　↓　↓　
<input type="button" value="結果を表示する" onclick="keisan();">
<div id="answer" style="white-space:pre;"></div>
</form>
</div>

上記ジャバスクリプトのプログラムで、選択肢（area1～area3）の結果ごとに、また別の異なるジャバスクリプト（test1.js、test2.js、test3.js）を呼び出すようにしたいのですが、コードの書き方が分からないため、ご教授いただけるとありがたいです。

もしかして、そもそもスクリプトの中で、別のスクリプトを呼び出すようなことはできないのでしょうか？

素人質問で恐縮ですが、よろしくお願いいたします。

Answer 1

できないことはないですが全部呼び出して、必要な部分だけ使えば済む話では？

Comments

[TreesShimi]

上のサンプルとは違って、実際に作成しているプログラムでは、全部のジャバスクリプトを書くとやたらと長くなるので、urlで呼び出す方がスッキリして良いと思ったですが。。。
スクリプトの記述は難しいのでしょうか？

Answer 2

function keisan() {
  // ◆◆◆3種類のエリアを選択◆◆◆
  var area={"area1":1,"area2":2,"area3":3};
  var selectarea = area[document.querySelector('#area').value];

  // ◆◆◆エリア選択結果◆◆◆
  switch (selectarea) {
    case 1:
    case 2:
    case 3:
      const script = document.createElement('script');
      script.src = 'test' + selectarea.toString() + '.js';
      document.head.appendChild(script);
      break;
    default:
      document.getElementById('answer').textContent = '';
      break;
  }
}

test1.js 例

document.getElementById('answer').textContent = 'aria1\nok';

Comments

[TreesShimi]

ありがとうございます！
最初は教えていただいた内容がよく分からなくて、色々あれこれいじったり、プログラムの意味を調べたりして悩みましたが、教えていただいたプログラムをそのまま素直に当てはめたら、正常に動作しました！

まだよく分かっていないことで、test1.js例の'aria1\nok'の記述があるのですが、この\nokというのはどんな意味があるのでしょうか？？
もし良ければ教えていただけると嬉しいですｍ(_ _)ｍ

[x_x]

ただの例でとくに意味などありません。
そこに何か表示させたいのかと思って適当な文字列を入れているだけです。
（昔BASICでは命令後にokって表示されたんですよ）

[TreesShimi]

なるほど！分かりました！ありがとうございました！！