- ベストアンサー
ラジオボタンとフォーム検索の結び付け方法を解説
- スマホ用にゲームの攻略サイトを作る際に、ラジオボタンとフォーム検索を組み合わせた機能が必要です。具体的には、ラジオボタンで「武器」か「防具」を選び、値段を入力すると、選んだラジオボタンによって表示結果が変わるようにしたいと考えています。現在は、ラジオボタン「武器」を選ぶと検索用ボタン「button_1」が表示され、ラジオボタン「防具」を選ぶと検索用ボタン「button_2」が表示されるようになっています。しかし、現在の実装では「防具」を選択し、値段を入力後、「武器」を選択すると前回の検索結果が残ってしまいます。これを解消するための改善案を教えてください。
- また、チェックボックスの選択を変えた場合やチェックボックスを選び直した場合に、前回入力した値段が消えるなどの対策も必要です。それに加えて、他にもっと効率的なやり方があるのか、改善案も教えてほしいです。
- どうぞよろしくお願いします。
- potapota24
- お礼率95% (95/99)
- JavaScript
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
「やりたいこと」を素直に実装してみました。 HTMLフォームを使う場合は submit イベントで全てを処理するのが綺麗だと思います。 「選び直した際は前回入力した数値は消える」の改善をなさるなら、フォームに対する change イベントをオススメします。 <!-- HTML5 --> <form name=test> <label><input type=radio name=k value=buki checked>武器</label> <label><input type=radio name=k value=bogu>防具</label> <label>価格:<input type=number name=p value=600></label> <button type=submit>判別</button> <p> 候補: <output name=r></output> </form> <!-- Script --> <script>addEventListener('load', function() { document.forms['test'].addEventListener('submit', function(e) { e.preventDefault(); var items = { buki:{ 勇者の剣:600, Snickersnee:600, クサナギの剣:6000 }, bogu:{ ただの盾:600, "shield of reflection":600, ヤタカガミの盾:6000 }, }; var vals = e.target.elements; // フォーム内の各要素 var kind = [].filter.call(vals['k'], function(n){return n.checked}); var cand = items[kind[0].value]; // アイテム候補 var pric = parseInt(vals['p'].value); var list = []; for (var i in cand) if (cand[i] == pric) list.push(i); vals['r'].value = list.length > 0? list.join(', '): "候補なし"; }, false) }, false)</script>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
原因は、ラジオボタンがクリックされればfunc()が実行され、その中で ＞ var url = ""; 以下のif文で、数値が600ならボタンの状態にかかわらず「勇者の剣」が代入（表示）されるようになっているから。 アイテムが何種類あるのか不明ですが、ご提示の方法だと100個あると100個分に応じたスクリプトをそれぞれ書くことになりそうですし、アイテムの追加/変更があると処理部分のスクリプトを都度修正しなければならなさそうです。 ボタンを取り替える必要性が理解できませんが、ごく単純化して考えると 1）武器、防具の一覧データを用意する（配列などで） 2）スクリプトの処理としては以下のように考える ボタンが押されたとき、ラジオボタンのどちらが選択されているのかを調べ、入力値の数値に応じた内容をデータから選択して表示する。 みたいなことで、原理的にはよさそうに思えますがいかがでしょうか。 このようにすることで、アイテムが変わったらデータの部分だけを入替えれば済むという利点もでてきます。 あと、いらぬおせっかいですが、 ＞document.test～～ のように、id属性での直接指定は避けた方が賢明かも。 id="body"なんてなのは、めったなことではつけないとは思いますが、この場合だとdocument.body～～となって……
お礼
ご回答ありがとうございます。 まさしく当初考えていたのは2）のやり方でした。 ですが考えても調べてもラジオボタンの選択を 入力した数値と結びつけるやり方がわからなかったための対応策として 質問内容にかいたような仕組みを作りました。 お手すきでしたらぜひこんな方法がある、ここのサイトが参考になるなど ご教授いただけたら幸いです。 idでの直接指定については注意してみようと思います。 ありがとうございました。
- itu1989
- ベストアンサー率44% (37/83)
func()・・・ボタンの切り替え～武器の表示 func2()・・・防具の表示 の2種類がありますが (1)ラジオボタンの選択時にボタンの表示切替用ファンクション (2)button_1押下時の武器検索用ファンクション (3)button_2押下時の防具検索用ファンクション と3つに分ければいいだけでは？
お礼
ご回答ありがとうございます。 ボタンを3つに分ける…考えもしませんでした。 一つのボタンに2つの役割をさせていたのがいけなかったのですね。 一度試してみたいと思います。 ありがとうございました。
お礼
ご回答ありがとうございます。 いただいたコードを実装したところ、見事にやりたかったことができました！ ですが記述の意味をすべて理解できているわけではないので 調べながら進めたいと思います。 ありがとうございました。