質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1217閲覧

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

masa1144

総合スコア2

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/01/04 15:10

編集2022/01/12 10:55

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"; }); }

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umau

2022/01/04 15:38

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

2022/01/04 15:42

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

2022/01/05 04:02

初心者さんマークがついているので、かなり基本的な部分の確認です。(すべて確認済みの場合は、ご容赦を・・) ①↑のumauさんの指摘修正後、npm run dev し直したと思いますが、それは成功しましたか?  →成功していないなら、コンパイル が成功するようにすべてのエラー(article.js以外のファイルも含む)を修正してください。 ②(①が問題ない場合)コンパイルで更新された article.js のファイル内を文字列検索して、priceSwitchの記述がありますか?  →ファイルがない・記述がない場合、webpack.mix.js の記述が間違っている?足りていない?かも。一度確認を。 ③(②が問題ない場合)ブラウザ上で、js/article.jsは、正常に読み込めていますか?(404エラーになっていない・その他のjsファイルなどでエラーが発生していない)  → 404の場合、view側のパス指定が、webpack.mix.jsの指定と合っているか、確認を。  → 他のエラーが発生している場合、エラーがなくなるよう全て修正してください。 ④(③が問題ない場合)ブラウザの開発ツール上などで、そのファイル内を文字検索して、priceSwitch() ~~ の記述は存在していますか?  → 記述が見つからない場合、ブラウザのキャッシュのせいかも。キャッシュ削除して再確認を・・
guest

回答1

0

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

javascript

1/* 2function priceSwitch() { 3 .... 4} 5*/ 6window.priceSwitch = function() { 7 .... 8} 9 10

投稿2022/01/04 15:58

umau

総合スコア805

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masa1144

2022/01/04 16:03

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

2022/01/04 16:28 編集

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

2022/01/04 16:35

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問