IDの取得、繰り返しに問題があるようなんですが・・・

Question

複数のセレクトの中から選んだ内容をコピーするスクリプトなんですが、 function answerPut(){ var answer = document.getElementById("s1"); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } ▲このように単独で１つのフォームからならコピーできたのですがこれを複数のフォームに対応させるためにforを使ってみたのですがどうにもうまくいきません。お知恵を拝借いただければ幸いです。 ▼うまくいかないスクリプト（1）（2）（3）

▼選んだ回答内容が入る

fujillin · Accepted Answer

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

fujillin · Answer

ANo2です。

＞「onChangeのところの値を（1箇所）とりたい」ほうです。
であるならば、やりたいことは

＞▲このように単独で１つのフォームからならコピーできたのですが
とほぼ同様ということになります。

ただし、対象が3個のうちのどれかひとつという点が違うので、エレメントの指定方法を変えて、固定のvalueを参照するのではなく、呼び出したセレクトタグのオプションvalueを読むようにする必要があります。

皆さんがおっしゃっているように、呼び出した相手をゼロから探すよりは、呼び出すときに、それがわかるようにしておいほうがはるかに簡単です。
　・呼び出した元を（id）などで識別する。
　・thisを用いて同様のことを行う。
あたりが、普通の方法。
ANo5様の記述を実行して、内容をよく読めば見えてくるでしょう…

for（というより、ループ）に関しては、かなり誤解されていようです。
今回は必要ないですが、基本的なことですから、きちんと理解しておいたほうが良いです。

t_netbug · Answer

解答ソースを書くのは簡単ですが、それでは質問者のスキルアップにはならないと思うので私も他の方々に習って小出しします。

id名を取得したいんですよね。
試しに
<select id="s1" onchange="alert(this.id)">
・
・
・
</select>
としてみてください。
検証にはalertが楽ですよ！（他にも方法はあると思いますが…）

SAYKA · Answer

>最後の3まで選べますよという意味だと思っています
で、なんで検証しないのかな？
それをやらないとどうしておかしなことになっているのか絶対理解できないよ。
そうだね、forを含んだ、そこに現れる変数やらを書き出して表にしてみたら、追いやすくなるんじゃないかな。
表の横に出てくる変数、表の縦は定変化する「i」を置いて。

>onChange="answerPut(this,'s')　で呼び出し
No2にも書かれてるけどthisについて調べた方が良いんじゃないかな
http://www.google.com/search?lr=lang_ja&q=javascript%20this

taloo · Answer

ヒントだけ。

> やりたいことは「onChangeのところの値を（1箇所）とりたい」ほうです。

要求：
3つあるselectフィールドのうち、onChangeが呼び出されたフィールドの値をanswerの値に入れたい。

問題点：
・どうやって変更されたselectフィールドを１つを見つけ出すか？

> var answer = document.getElementById(id+i);
このid+iという部分はselectフィールドのどれを指しているか？
（このままではidという変数が未定義なので動きません）


ヒント２
onChange="answerPut('s1');"

または、この書き方の方がよく使われます
onChange="answerPut(this);"


ヒント３（ヒントと言えないか、、、？）
「選択した１つ」を見つけ出すのに、もちろんループを使った検索方法もありますが、ややこしくなるので一般的な方法ではないです。

fujillin · Answer

え～っと…　何箇所かのミスが重なった結果です。

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様の指摘と同じなので省略）

SAYKA · Answer

>（3）<select name="" id="s2" onChange="answerPut();"> 
この「s2」の重複は書き写しの時に間違い？コピペなら重複になるけど？

あと、サラっとしか見てないからわかんないけど、
常に(3)の値が出るんじゃない？

もしそうだとするならforの中でやってる処理を、一度追ってみた方が良いよ。
呼ぶなら answerPut() に引数を入れてあげようよ。
this使ってidの値を参照させるとか　かな。

IDの取得、繰り返しに問題があるようなんですが・・・

No.2です。

ANo2です。

この回答への補足

解答ソースを書くのは簡単ですが、それでは質問者のスキルアップにはならないと思うので私も他の方々に習って小出しします。

>最後の3まで選べますよという意味だと思っています

この回答への補足

ヒントだけ。

この回答への補足

え～っと… 何箇所かのミスが重なった結果です。

この回答への補足

>（3）<select name="" id="s2" onChange="answerPut();">

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

え～っと…　何箇所かのミスが重なった結果です。