【JavaScript】type="module"のJSの関数を呼ぼうとするとnot definedになってしまいます。

Question

いつもお世話になっております。
早速本題に入らせて頂きます。

以下のようなhtmlで、クリックされた時にtype="module"となっているjsの関数を呼び出したいのですが、
not definedと表示されてしまいます。

<script src="./resources/js/sample.js" type="module" /></script>

<input type="text" name="name" onclick="test($(this));"/>

import sample2 from './sample2.js';

function test(obj){
	console.log("クリックされました");
}

【実行結果】
Uncaught ReferenceError: test not defined

type="module"としたjavaScriptは普通のJSと違って、ただ関数呼び出しをするだけでは動作しないのでしょうか？

お時間ある方で知識をお持ちの方いらっしゃいましたらご助力頂けますと幸いです。

Comments

[yambejp]

「$(this)」とは何を指定している想定でしょうか？
参照はしていないようですが・・・

Answer 1

ただ関数呼び出しをするだけでは動作しないのでしょうか？

はい。モジュールの関数はグローバルスコープに属していないので。

こちらの質問が同じ問題を扱っています。
Javascript の Module 関数を htmlレベルから使いたい

モジュール内で addEventListener() するのも正しい対処だと思います。

Answer 2

//sample.html

<script src="sample.js" type="module"></script>
<script type="module">
import test from "./sample.js";
window.addEventListener('DOMContentLoaded', ()=>{
  hoge.addEventListener('click',test);
});
</script>
<input type="text" name="name" id="hoge" />

//sample.js

function test(){
  console.log("クリックされました");
};
export default test