Javascriptでhtmlのradioボタンによりフォームの表示、非表示を行いたいのですがUncaught ReferenceErrorが出る。

Question

htmlで値段フォームの表示非表示をradioボタンの切り替えにより行いたいのですが

create:62 Uncaught ReferenceError: priceSwitch is not defined
    at HTMLInputElement.onclick 

というエラーが出ます。
Laravelでjsファイルはlaravel mixしてあり、viewの継承元ファイルにはbodyタグの閉じタグの前に

  </div>
    <script src="{{ mix('js/article.js') }}"></script>
</body>

と記述してあります。
他のコードは以下のようになっています。
create.blade.php

  <input type="radio" class="radioFee"  name="is_fee" value="0"  onclick="priceSwitch();" checked>
無料
</label>
<label>
  <input type="radio" class="radioFee"  name="is_fee" value="1" onclick="priceSwitch();">
有料
</label>
<span id="pricing-form">
<label>￥<input type="tel" minlength="3" name="price"></input> JPY</label>
  <button type=submit>追加</button>

article.js

function priceSwitch() {
    const formBox = document.getElementById('pricing-form');
  const radioFee = document.getElementsByClassName('radioFee');
        radioFee[0].addEventListener('change', function (){
        formBox.style.display = "none";
      });
        radioFee[1].addEventListener('change', function (){
        formBox.style.display = "block";
      });
  }

何が原因で出ているのでしょうか...?

Comments

[umau]

分からないですが、気づいた事だけ共有しておきます。
貼られているpriceSwitch関数には不要な謎の中カッコ{}が含まれていて、これが邪魔になってWebpackがminifyに失敗してる可能性が気になります。ついでにインデント整えたり、キレイにしてみることをオススメします。

[masa1144]

すみません、そちら整えました。ですが未だに同じエラーが出ます。

[mix-peach]

初心者さんマークがついているので、かなり基本的な部分の確認です。（すべて確認済みの場合は、ご容赦を・・）

①↑のumauさんの指摘修正後、npm run dev し直したと思いますが、それは成功しましたか？
　→成功していないなら、コンパイル が成功するようにすべてのエラー（article.js以外のファイルも含む）を修正してください。

②（①が問題ない場合）コンパイルで更新された　article.js　のファイル内を文字列検索して、priceSwitchの記述がありますか？
　→ファイルがない・記述がない場合、webpack.mix.js の記述が間違っている？足りていない？かも。一度確認を。

③（②が問題ない場合）ブラウザ上で、js/article.jsは、正常に読み込めていますか？（404エラーになっていない・その他のｊｓファイルなどでエラーが発生していない）
　→　404の場合、view側のパス指定が、webpack.mix.jsの指定と合っているか、確認を。
　→　他のエラーが発生している場合、エラーがなくなるよう全て修正してください。

④（③が問題ない場合）ブラウザの開発ツール上などで、そのファイル内を文字検索して、priceSwitch() ~~　の記述は存在していますか？
　→　記述が見つからない場合、ブラウザのキャッシュのせいかも。キャッシュ削除して再確認を・・

Answer 1

以下の書き方に変えたらどうでしょうか？ 参考

/*
function priceSwitch() {
   ....
}
*/
window.priceSwitch = function() {
   ....
}

Comments

[masa1144]

それは前にも試したことがあり、今一度書いていただいたコードを試しても同じエラーが出ました。

[umau]

利用側も
onclick="window.priceSwitch()"
と書いてもダメでしょうか？
https://stackoverflow.com/questions/51175235/how-to-add-global-functions-in-laravel-webpack-mix-js

[masa1144]

両方書いてみましたが
window.priceSwitch is not a function
at HTMLInputElement.onclick
というエラーが出て
無理でした！

[umau]

そうですか、、色々見ている限り、webpackが外部に関数を公開しないところをすり抜けるためには、何らかのグローバルな変数を介する必要はありそうに見えます。
ただ現状、何故そちらでwindowから関数が取り出せないのかはわからないですね。申し訳ない。