Rails6 jsファイルの読み込み

rails初心者です。
ビューへのjsファイルの適用の練習として
1.各ビューにjavascript_pack_tagを記述
2.application.jsにimport "./test.js"
の2つを試しました。

しかし、1では正しくjsファイルが読み込まれ、機能していましたが、2では計算ボタンを押しても何も反応が起こりません。
今回使用したjsファイル（test.js）及びhtml.erbファイルは以下です。
原因・解決策が分かる方、ご教示いただけますと幸いです。

test.js
1let bmiform = document.getElementById("bmiIndex");
2let comment = document.getElementById("evil");
3const calcbtn = document.getElementById("calcbtn");
4
5function BMIcalc(){
6    let $h = document.getElementById("hform");
7    let $w = document.getElementById("wform");
8    let h = $h.value;
9    let w = $w.value;
10    let Th = Number(h)/100;
11    let bmires = Number(w)/(Th*Th);
12    let BMI = bmires.toFixed(2);
13    bmiform.textContent = BMI;
14    if(BMI >= 30){
15        comment.textContent = "☆肥満☆";
16        comment.className = "fat";
17    }
18    else if(BMI < 30 && BMI >= 22){
19        comment.textContent = "普通";
20        comment.className = "medium";
21    }
22    else{
23        comment.textContent = "痩せ";
24        comment.className = "smart";
25    }
26}
27
28calcbtn.addEventListener("click", BMIcalc);

test.html.erb
1<div class="wrapper">
2    <h2>
3        BMI自動計算機
4    </h2>
5    <div id="flame_1">
6        <div id="height">身長</div>
7        <input type="text" id="hform" value="">cm
8    </div>
9    <div id="flame_2">
10        <div id="weight">体重</div>
11        <input type="text" id="wform" value="">kg
12    </div>
13    <div id="calc">
14        <button type="button" id="calcbtn">計算</button>
15    </div>
16    <div id="result">
17        <span>　BMI:</span><span id="bmiIndex"></span>
18    </div>
19    <div id="evil" class="">
20    </div>
21</div>