- ベストアンサー
IDの取得、繰り返しに問題があるようなんですが・・・
複数のセレクトの中から選んだ内容をコピーするスクリプトなんですが、 function answerPut(){ var answer = document.getElementById("s1"); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } ▲このように単独で１つのフォームからならコピーできたのですが これを複数のフォームに対応させるためにforを使ってみたのですが どうにもうまくいきません。お知恵を拝借いただければ幸いです。 ▼うまくいかないスクリプト <html> <body> <script type="text/javascript"> function answerPut(){ for(var i=1; i<=3; i++){ var answer = document.getElementById(id+i); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } } </script> （1）<select name="" id="s1" onChange="answerPut();"> <option value="あ1">あ1</option> <option value="い1">い1</option> <option value="う1">う1</option> </select> （2）<select name="" id="s2" onChange="answerPut();"> <option value="あ2">あ2</option> <option value="い2">い2</option> <option value="う3">う2</option> </select> （3）<select name="" id="s2" onChange="answerPut();"> <option value="あ1">あ3</option> <option value="い2">い3</option> <option value="う3">う3</option> </select> <br> <br> ▼選んだ回答内容が入る<br> <input type="text" name="9" value="" size="40" id="answer"> </body> </html>
- rollbahn
- お礼率37% (6/16)
- JavaScript
- 回答数7
- ありがとう数6
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
No.2です。 素直なスクリプトになりましたね。おめでとうございます。 実は、回答のみなさん（No.1～No5まで）は言葉は少しずつ違いますが、ほぼ同じような内容を書いています。 .以下は、こういうのもあるよという参考までに。 HTML側では <select name="1" id="s1" onChange="answerPut(this);"> としておいて、スクリプトのほうを1行にまとめちゃうと function answerPut(elm){ document.getElementById("answer").value=elm.options[elm.selectedIndex].value; }
その他の回答 (6)
- fujillin
- ベストアンサー率61% (1594/2576)
ANo2です。 ＞「onChangeのところの値を（1箇所）とりたい」ほうです。 であるならば、やりたいことは ＞▲このように単独で１つのフォームからならコピーできたのですが とほぼ同様ということになります。 ただし、対象が3個のうちのどれかひとつという点が違うので、エレメントの指定方法を変えて、固定のvalueを参照するのではなく、呼び出したセレクトタグのオプションvalueを読むようにする必要があります。 皆さんがおっしゃっているように、呼び出した相手をゼロから探すよりは、呼び出すときに、それがわかるようにしておいほうがはるかに簡単です。 ・呼び出した元を（id）などで識別する。 ・thisを用いて同様のことを行う。 あたりが、普通の方法。 ANo5様の記述を実行して、内容をよく読めば見えてくるでしょう… for（というより、ループ）に関しては、かなり誤解されていようです。 今回は必要ないですが、基本的なことですから、きちんと理解しておいたほうが良いです。
補足
No.5さんの記述を色々実行してみました。 ようやくどれだけ意味のないことをしていたかがよくわかりました。 以下のように組んでみました。 少しは理解できたように思うのですが、fujillinさんのアドバイスの意図がきちんと組まれてますでしょうか？ 長丁場の質問ですみません。よかったら答えてくださると嬉しいです。 <html> <body> <script type="text/javascript"> function answerPut(a){ var answer = document.getElementById(a); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value; } </script> <form name="form"> （1）<select name="1" id="s1" onChange="answerPut(this.id);"> <option value="">▼選んでください</option> <option value="あ1">あ1</option> <option value="い1">い1</option> <option value="う1">う1</option> </select> （2）<select name="2" id="s2" onChange="answerPut(this.id);"> <option value="">▼選んでください</option> <option value="あ2">あ2</option> <option value="い2">い2</option> <option value="う2">う2</option> </select> （2）<select name="3" id="s3" onChange="answerPut(this.id);"> <option value="">▼選んでください</option> <option value="あ3">あ3</option> <option value="い3">い3</option> <option value="う3">う3</option> </select> <br> <br> ▼選んだ回答内容が入る<br> <input type="text" name="9" value="" size="40" id="answer"> </form> </body> </html>
- t_netbug
- ベストアンサー率34% (15/44)
解答ソースを書くのは簡単ですが、それでは質問者のスキルアップにはならないと思うので私も他の方々に習って小出しします。 id名を取得したいんですよね。 試しに <select id="s1" onchange="alert(this.id)"> ・ ・ ・ </select> としてみてください。 検証にはalertが楽ですよ！（他にも方法はあると思いますが…）
お礼
「・・・！」という感じでした。有難うございます。 No.2さんのおっしゃってることがここでようやく分かりました・・・。 大変遅い気づきでしたが、大きく一歩前進できました！
- SAYKA
- ベストアンサー率34% (944/2776)
>最後の3まで選べますよという意味だと思っています で、なんで検証しないのかな？ それをやらないとどうしておかしなことになっているのか絶対理解できないよ。 そうだね、forを含んだ、そこに現れる変数やらを書き出して表にしてみたら、追いやすくなるんじゃないかな。 表の横に出てくる変数、表の縦は定変化する「i」を置いて。 >onChange="answerPut(this,'s') で呼び出し No2にも書かれてるけどthisについて調べた方が良いんじゃないかな http://www.google.com/search?lr=lang_ja&q=javascript%20this
補足
叱咤激励有難うございます。もっと努力したいと思います。 thisについて、あまり参考書（ポケットリファレンス）で突っ込んで書かれてないので、 勝手に日本語直訳で「“コレ”が～？」と解釈して詳しく調べようとしてませんでした。サンプル探し以外でももっとネットを活用しようと思います。 時間がかかってしまったのですが、なんとか下記のような形で、 自力でエラーが出ないものを作ることが出来ました。 ただ、本当の意味で理解が出来ているかどうか不安なのでコメントを見てやっていただけませんか？ また、もっとこうしたらいいということがあればアドバイスを宜しくお願いいたします。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ヒントだけ。 > やりたいことは「onChangeのところの値を（1箇所）とりたい」ほうです。 要求： 3つあるselectフィールドのうち、onChangeが呼び出されたフィールドの値をanswerの値に入れたい。 問題点： ・どうやって変更されたselectフィールドを１つを見つけ出すか？ > var answer = document.getElementById(id+i); このid+iという部分はselectフィールドのどれを指しているか？ （このままではidという変数が未定義なので動きません） ヒント２ onChange="answerPut('s1');" または、この書き方の方がよく使われます onChange="answerPut(this);" ヒント３（ヒントと言えないか、、、？） 「選択した１つ」を見つけ出すのに、もちろんループを使った検索方法もありますが、ややこしくなるので一般的な方法ではないです。
補足
ヒント有難うございます！ 時間がかかってしまったのですが、なんとか下記のような形で、 自力でエラーが出ないものを作ることが出来ました。 ただ、本当の意味で理解が出来ているかどうか不安なのでコメントを見てやっていただけませんか？ また、もっとこうしたらいいということがあればアドバイスを宜しくお願いいたします。 <html> <body> <script type="text/javascript"> function answerPut(id){ //thisが読みこまれたら idにselectのオブジェクト自身を引き渡す for (var i=1; i<=3; i++){ //変数iは0から始まり3未満の数値まで繰り返し１増えます。 var answer = document.getElementById(id+i); //変数answerにオブジェクトのIDを「id＋変数iの値」を代入します。 } var rslt = id.value; //変数rsltにid（thisで引き受けたオブジェクト自身）のvalue値を代入します。 document.getElementById("answer").value = rslt; //変数answerのvalue値に変数rsltを代入します。 } </script> <form name="form"> （1）<select name="1" id="s1" onChange="answerPut(this);"> <!-- thisはこのオブジェクト自身 --> <option value="">▼選んでください</option> <option value="あ1">あ1</option> <option value="い1">い1</option> <option value="う1">う1</option> </select> （2）<select name="t2" id="s2" onChange="answerPut(this);"> <option value="">▼選んでください</option> <option value="あ2">あ2</option> <option value="い2">い2</option> <option value="う2">う2</option> </select> <br> <br> ▼選んだ回答内容が入る<br> <input type="text" name="9" value="" size="40" id="answer"> </form> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
え～っと… 何箇所かのミスが重なった結果です。 forでやってるってことは、全部のselectの内容を取得したいってことかな？ それともonChangeのところの値を（1箇所）とりたいってことでしょうか？ いずれにしろ、まずはエレメントを得ているところで var answer = document.getElementById(id+i); id+iの値はループにしたがって'1'、'2'、'3'となるはずだけど、それに対応するエレメントが無いので、ここでエラーになっているはず。 （ブラウザによってエラー表示するものとそうでないものがある） No1様の指摘にもあるけれど、HTML側のid="s2"が重複していて、"s3"が無いので、スクリプトで"s3"を探しても見つからない。（これもエラー） 途中で、エラーが起きると処理は中断されるので、見かけ上何も起こらないということになります。 あと、HTMLのオプションの表示テキストとvalueが一致していないので、実験していて、動作の不具合と勘違いしました。 （別に問題はないけど、多分タイプミスでは？） もしも、同時に3この値を取得するならこんな感じ、 （HTMLのid（s3）は修正しておいてください） function answerPut(){ var rslt=''; for(var i=1; i<=3; i++){ rslt += ' , ' + document.getElementById('s' + i).value; } document.getElementById("answer").value=rslt.substring(3); } 全部じゃなくて、一箇所だけ取れればいいのなら、ループする必要はないけど、どのセレクトタグから呼び出されたかわかるようにしておくほうが簡単。（No1様の指摘と同じなので省略）
補足
タイプミスを含め、理解が及んでないため色々と間違いがあってごめんなさい。やりたいことは「onChangeのところの値を（1箇所）とりたい」ほうです。 長くなるので記述してないのですが、それぞれのselectは記述していない別のselectで切り替えどれか一つ表示させています。そのため各selectの初期値をdisplay:none;にしておりフォームの確認画面に値が引き継げないため、このように別のinputにコピーしてそこからvalueをphpに渡す仕組みを考えています。 もしかしてforを使うことが間違っているのでしょうか？；； idを一つ一つ指定すると長くなるので、idの連番に応じて繰り返して同じ箇所にコピーできると考えました。 function answerPut(){ var rslt=''; for(var i=1; i<=3; i++){ rslt = document.getElementById('s' + i).value; document.getElementById("answer").value=rslt; } ▲理解が及んでないせいでこうなるのかな・・・と思ったのですが違いました； できれば引き続き、どのへんがまず理解できてないのかを教えていただけると嬉しいです。
- SAYKA
- ベストアンサー率34% (944/2776)
>（3）<select name="" id="s2" onChange="answerPut();"> この「s2」の重複は書き写しの時に間違い？コピペなら重複になるけど？ あと、サラっとしか見てないからわかんないけど、 常に(3)の値が出るんじゃない？ もしそうだとするならforの中でやってる処理を、一度追ってみた方が良いよ。 呼ぶなら answerPut() に引数を入れてあげようよ。 this使ってidの値を参照させるとか かな。
補足
回答ありがとうございます。いろいろ間違っててごめんなさい。 forの使い方の認識が間違っている可能性のある気がします。 常に(3)の値がでてしまう原因がよくわかりません。 (var i=1; i<=3; i++) を、 iの値は1から1こずつ増えて、最後の3まで選べますよという意味だと思っています。 引数を入れるということで、↓こんなかんじかと考えたのですが オブジェクトがないですといわれます。 onChange="answerPut(this,'s') で呼び出し function answerPut(obj,id){ ↑こいつ（obj）をどうにかすればいいと思うのですが・・・ var rslt=''; for(var i=1; i<=3; i++){ rslt = document.getElementById(id+i).value; document.getElementById("answer").value= rslt; }
お礼
selectedIndexを使ったやり方、とても簡潔でびっくりしました。 options[elm.selectedIndex]、調べてみました。 これもセレクトを使うときはかなり重宝しそうです。 fujillinさんには長い間お付き合い頂き有難うございました。 本当に、この右も左も分からぬ初心者に対して みなさんで根気強く見て頂いたおかげです。 今後もさらに勉強をして理解を深めていきたいです。