JavaScriptファイルの戻り値をブラウザ上に表示させたい。

プログラミング初心者ですがどうぞよろしくお願いいたします。

実現したいこと

前提

HTMLファイルに2つのJSファイルを読み込み、ブラウザ上で戻り値を表示させようとしております。
既にHTMLファイルでは2つのJSファイルの読み込みは完了しているかつ、関数も記載しているのですがうまく動作しません。

発生している問題・エラーメッセージ

コンソール上では以下のように記載されていますが、getDateは別ファイルで定義しているつもりで原因がわかりません。

エラーメッセージ
station12-common.js:1 Uncaught ReferenceError: getData is not defined

### 該当のソースコード

```HTML
ソースコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Station 12</title>
    <script src="./scripts/station12-common.js"></script>
    <script src="./scripts/station12.js"></script>
  </head>
  <body>
    <div class="card-container">
      <div class="card">
        <p id="result"></p>
      </div>
    </div>
  </body>
</html>

```JSファイル1
function getData() {
  return "テスト";
}

```JSファイル2
var result = getData();
var elem = document.getElementById("result");
elem.innerHTML = result;


### 試したこと
こちらのサイト内やいろいろ戻り値についても調べましたがわからず途方にくれています。。

どうぞよろしくお願いいたします。

hoshi-takanori

2023/02/03 01:24

script タグを書く位置を変えるか、onload とかを使うか…。 https://www.sejuku.net/blog/19754

byamadaro1013

2023/02/03 02:39

ありがとうございます！scriptタグの位置をかえてうまくいきました。感謝申し上げます。

回答1件

ベストアンサー

station12-common.js:1 Uncaught ReferenceError: getData is not defined

station12-common.js が「JSファイル2」、station12.js が「JSファイル1」だと思われますが、それなら、以下の<script>2つの順番を入れ替える必要があります。先に function getData() ... を実行する必要があるためです。

html
1    <script src="./scripts/station12-common.js"></script>
2    <script src="./scripts/station12.js"></script>

また、入れ替えなくても「JSファイル2」のコードをHTML文書のパーズ後に実行すれば色々と都合がよいでしょう。

js
1document.addEventLisetner('DOMContentLoaded', () => {
2  const result = getData();
3  const elem = document.getElementById("result");
4  elem.innerHTML = result;
5}