javascriptに記述した処理をhtmlで表示する

前提・実現したいこと

javascriptに記述した処理をhtmlで表示しようとしたのですが、
下記のファイル構造にすると、なぜかhtmlからfunctionを呼べなくなってしまいました。

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

すべてのfunctionを
statement.jsに記述している時は正常に動作していたのですが、
一部のfunctionをcretateStatement.jsに移したところ、
なぜか、htmlで呼んでいるstatement(invoices, plays)が
未定義になってしまいました。

jsから別のjsを呼ぶことは問題ないと思っているのですが、
呼び方が誤っているのでしょうか。

js初心者で申し訳ございませんが、
解決法をご教授いただけると幸いです。

該当のソースコード

html
1<!DOCTYPE html>
2<html >
3<head>
4    <meta charset="UTF-8">
5    <script src="./statement.js"></script>
6    <title>Title</title>
7</head>
8<script>
9
10    function exec(invoices,plays){
11    var elem = document.getElementById("output");
12    var test = statement(invoices, plays);
13    elem.innerHTML = test;
14}
15
16</script>
17<body>
18    <input id="Button1" type="button" value="button" onclick="exec(invoices,plays);"/>
19    <div id="output"></div>
20</body>
21</html>

javascript
1// statement.js
2import createStatementData from './createStatementData';
3
4function statement(invoice, plays){
5    return renderPlainText(createStatementData(invoice, plays));
6}
7
8function renderPlainText(data,invoice, plays){
9	let result = `Statement for ${data.customer}<br>`;
10	
11	for(let perf of data.performances){
12        // 注文の内訳を出力
13        result += ` ${perf.play.name}: ${usd(perf.amount)} (${perf.audience} seats)<br>`;
14    }
15
16    result += `Amount owed is ${usd(data.totalAmount)}<br>`;
17    result += `You earned ${data.totalVolumeCredits} credits <br>`;
18    return result;
19}
20

javascript
1//createStatementData.js
2function createStatementData(invoice, plays){
3    const result = {};
4    result.customer = invoice.customer;
5    result.performances = invoice.performances.map(enrichPerformance);
6    result.totalAmount = totalAmount(result);
7    result.totalVolumeCredits = totalVolumeCredits(result);
8    return result;
9
10    function enrichPerformance(aPerformance) {
11        const result = Object.assign({},aPerformance);
12        result.play = playFor(result);
13        result.amount = amountFor(result);
14        result.volumeCredits = volumeCreditsFor(result);
15        return result;
16    }
17}
18
19下記省略・・

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

tomomo

2021/06/27 08:59

実行環境やコンソールに出ているエラー等は記述した方がいいのではないでしょうか？もっと言えば第三者にはその動いている状態というのもわかりませんから、前後の違いがわかるように書いた方が回答つくのかもしれません。

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript モジュール(import/export)を使いたいのかどうかで対処が異なります。

JavaScript モジュールを使わない場合

statement.js の import 文を消す
HTMLに createStatementData.js のための <script>を足す

JavaScript モジュールを使う場合

HTML の <script src="./statement.js"></script> を消す
HTML の<script> を <script type=module> に変更し、中に statement のための import 文を書く
statement.js の import 文の './createStatementData' を './createStatementData.js' に直す
statement.js の function statement の前に export を足す
createStatementData.js の function createStatementData の前に export を足す