• ベストアンサー

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

複数のセレクトの中から選んだ内容をコピーするスクリプトなんですが、 function answerPut(){ var answer = document.getElementById("s1"); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } ▲このように単独で1つのフォームからならコピーできたのですが これを複数のフォームに対応させるために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>

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.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; }

rollbahn
質問者

お礼

selectedIndexを使ったやり方、とても簡潔でびっくりしました。 options[elm.selectedIndex]、調べてみました。 これもセレクトを使うときはかなり重宝しそうです。 fujillinさんには長い間お付き合い頂き有難うございました。 本当に、この右も左も分からぬ初心者に対して みなさんで根気強く見て頂いたおかげです。 今後もさらに勉強をして理解を深めていきたいです。

その他の回答 (6)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.6

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

rollbahn
質問者

補足

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)
回答No.5

解答ソースを書くのは簡単ですが、それでは質問者のスキルアップにはならないと思うので私も他の方々に習って小出しします。 id名を取得したいんですよね。 試しに <select id="s1" onchange="alert(this.id)"> ・ ・ ・ </select> としてみてください。 検証にはalertが楽ですよ!(他にも方法はあると思いますが…)

rollbahn
質問者

お礼

「・・・!」という感じでした。有難うございます。 No.2さんのおっしゃってることがここでようやく分かりました・・・。 大変遅い気づきでしたが、大きく一歩前進できました!

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.4

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

rollbahn
質問者

補足

叱咤激励有難うございます。もっと努力したいと思います。 thisについて、あまり参考書(ポケットリファレンス)で突っ込んで書かれてないので、 勝手に日本語直訳で「“コレ”が~?」と解釈して詳しく調べようとしてませんでした。サンプル探し以外でももっとネットを活用しようと思います。 時間がかかってしまったのですが、なんとか下記のような形で、 自力でエラーが出ないものを作ることが出来ました。 ただ、本当の意味で理解が出来ているかどうか不安なのでコメントを見てやっていただけませんか? また、もっとこうしたらいいということがあればアドバイスを宜しくお願いいたします。

回答No.3

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

rollbahn
質問者

補足

ヒント有難うございます! 時間がかかってしまったのですが、なんとか下記のような形で、 自力でエラーが出ないものを作ることが出来ました。 ただ、本当の意味で理解が出来ているかどうか不安なのでコメントを見てやっていただけませんか? また、もっとこうしたらいいということがあればアドバイスを宜しくお願いいたします。 <html> <body> <script type="text/javascript"> function answerPut(id){ //thisが読みこまれたら idにselectのオブジェクト自身を引き渡す for (var i=1; i<=3; i++){ //変数iは0から始まり3未満の数値まで繰り返し1増えます。 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)
回答No.2

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

rollbahn
質問者

補足

タイプミスを含め、理解が及んでないため色々と間違いがあってごめんなさい。やりたいことは「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)
回答No.1

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

rollbahn
質問者

補足

回答ありがとうございます。いろいろ間違っててごめんなさい。 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; }

関連するQ&A

  • 同じようなのばかりだ申し訳ないのですが…javaに関してです。

    以下のようなプログラムを作成しました。3つのスクリプトを動作させたいのですがどうすればよいですか?また,画像のように(1)~(3)の和を算出するにはどうすればいいですか?助けて下さい。お願いします。 <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1){ rslt=50; } else { if (v1==1 && v2==2) { rslt=47; } else { if (v1==2 && v2==1) { rslt=30; } else { rslt=20; }}} document.getElementById('txt1').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v3=document.getElementById('s3').value; var rslt; if (v1==1 && v3==1){ rslt=40; } else { if (v1==1 && v3==2) { rslt=80; } else { if (v1==2 && v3==1) { rslt=70; } else { rslt=10; }}} document.getElementById('txt2').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v4=document.getElementById('s4').value; var rslt; if (v1==1 && v4==1){ rslt=83; } else { if (v1==1 && v4==2) { rslt=53; } else { if (v1==2 && v4==1) { rslt=33; } else { rslt=13; }}} document.getElementById('txt3').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1<option value="2">2 </select>   <select id="s2" onChange="hoge()"> <option value="1">1<option value="2">2 </select>   <select id="s3" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s4" onChange="hoge()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""> </body> </html>

    • ベストアンサー
    • Java
  • セレクトで選んだ数の計算方法

    初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が2つあり、その積を表示したいのです。 どうしたらよいでしょうか。 </script> <script langauage="JavaScript"> <!-- function calcNum(){ var num1 = parseInt(document.getElementById('s1').value); var num2 = parseInt(document.getElementById('s2').value); var kei = num1 * num2; } //--> </script> </head> <body> <form name="form1"> <select size="1" name="select2" id="s2" onchange="selectChange()"> <option value="5"> 5</option> <option value="9"> 9</option> </select> </form> <form name="form1"> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2"> 2</option> <option value="12">12</option> </select> </form> <input type="text" name="kei" size="10">  <input type="button" value="計算" onmousedown="calcNum()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、 どのようにしたら良いか、教えてください。 根本的に違っているようでしたら、どうやればよいのか教えてください。 よろしくお願いします

  • IDをvalueの値でなく、class名から取得したい

    HTML上でvalue値を日本語にしてスマートに値を取得したいため、 value値でなくclass名でidnameに引き渡したいです。 (value)を(className)にしてみる等試行錯誤してみましたが どうやら見当違いのようです。お知恵を拝借したく思います。 <html> <head> <TITLE>Webサイト</TITLE> <STYLE TYPE="text/css"> <!-- .secondpulldown {display: none;} --> </STYLE> </head> <body> <script type="text/javascript"> function waySelect() { document.getElementById('select01').style.display = 'none'; document.getElementById('select02').style.display = 'none'; document.getElementById('select03').style.display = 'none'; } function SetSubMenu( idname ) { waySelect(); if( idname != "" ) { document.getElementById(idname).style.display = 'inline'; } } </script> <select name="oya" id="hiragana" onchange="SetSubMenu(value);"> <!--ここを(className)にするのは見当違いですか?)--> <option value="select01" class="select01">あいう</option> <option value="select02" class="select02">えおか</option> <option value="select03" class="select03">きくけ</option> </select> <!-- *------下に出現------* --> <br> <br> <select id="select01" class="secondpulldown" onchange="text01(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ああああ</option> <option value="2">いいいい</option> <option value="3">うううう</option> </select> <select id="select02" class="secondpulldown" onchange="test(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ええええ</option> <option value="2">おおおお</option> <option value="3">かかかか</option> </select> <select id="select03" class="secondpulldown" onchange="test(this);"> <option value="0" selected>選択して下さい</option> <option value="1">きききき</option> <option value="2">くくくく</option> <option value="3">けけけけ</option> </select>

  • html onchange

    下記のコードでf002は動きますが、f001が動きません。 scriptで作ったオプションメニューもonChangeが働くようにするには、いかがしたらよろしいでしょうか? <script language="JavaScript"><!-- function f001(){ if (document.test.s1.value==2) alert("2が入力されました"); } function f002(){ if (document.test.s2.value==2) alert("2が入力されました"); } var i,ht=[]; i=0; ht[i] = '<select onChange="f001()" id="s1" >'; for( var i=1; i<=5;) ht[i] = '<option value='+(i)+(i==1?' selected':'')+'>'+(i++)+'</option>'; ht[i] = '</select>'; document.write('s1 =', ht.join('')); // --></script> <form name="test"> s2 = <select onChange="f002()" id=s2> <option value=1 selected>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> </select> </form>

  • セレクトの値を取得できない

    <select name='aaa' id='aaa'> <option value='5'>5</option> <option value='6'>6</option> </select> <script> var bbb = document.getElementById('aaa'); document.open(); document.write(bbb); document.close(); </script> のように書いたのですが [object HTMLSelectElement] と表示されます。 何がいけないのでしょうか?

  • JavaScript 複数のIDがある時の処理

    時々お世話になっております。今回はJavaScriptを始めたばかりでどうにもイメージが湧かずに質問させて頂きます。以下のサイトでformのselectを選択したら情報が表示されるものを作りたいと思い、イメージに近いソースを拝見しました。 https://memorva.jp/memo/html/javascript_onchange_select_menu.php ーーーー以下HTMLーーーー <form action="#" method="post" name="form"> <select name="kaizoudo" id="kaizoudo"> <option value="manual">手入力(以下のテキストボックス)</option> <option value="8k">8K(7680×4320)</option> <option value="4k">4K(3840×2160)</option> <option value="fhd">FHD(1920×1080)</option> <option value="hd">HD(1280×720)</option> </select> <br /> 画面の横のピクセル数<br /> <input type="text" value="" name="yoko" id="yoko"><br /> 画面の縦のピクセル数<br /> <input type="text" value="" name="tate" id="tate"><br /> </form> ーーーー以下JavaScriptーーーー <script> document.getElementById("kaizoudo").onchange = function(){ var kaizoudo = document.getElementById("kaizoudo"); var dw = ''; var dh = ''; switch(kaizoudo.value){ case 'manual': dw = ''; dh = ''; break; case '8k': dw = 7680; dh = 4320; break; case '4k': dw = 3840; dh = 2160; break; case 'fhd': dw = 1920; dh = 1080; break; case 'hd': dw = 1280; dh = 720; break; } document.getElementById("yoko").value = dw; document.getElementById("tate").value = dh; }; </script> ーーーーここまでーーーー 問題はこれを複数のselectを選択できるようにしたいのですが、どのように設定すれば良いのかイメージが湧きません。。。 <イメージ> 商品1 選択肢 選択した情報(yoko) 選択した情報(tate) 商品2 選択肢 選択した情報(yoko) 選択した情報(tate) 商品3 選択肢 選択した情報(yoko) 選択した情報(tate) ・ ・ ・ 【送信】 ※選択肢は全て同じです 当然IDはユニークなためid="kaizoudo"を繰り返し使う訳にはいかないので、kaizodo1,kaizodo2のように固有のIDを作りselectを設置するようになると思いますが、JavaScriptをIDごとに書くには字数が多くなりますし、選択肢はこれよりもっと多くなることを想定しておりますので、できればWhileやforで反復処理できないかと考えております。 (PHPなら少々分かるのですが、JavaScriptはまだ勉強しておらず) 上記内容にてヒントを頂ける方がいらっしゃいましたら、よろしくお願い致します。

  • セレクトメニューに応じたdivタグの内容

    javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>

  • javaScriptのif文について…

    以下のようなプログラムを作成しました。作ったのはサンプルで、本当に作りたいのはもっと条件が多いのを作りたいのですが、かなりifの羅列となってしまいます。他に何か良い方法はありませんか?教えてくださいm(__)M <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1) { rslt=36; } else { if (v1==1 && v2==2) { rslt=29; } else { if (v1==1 && v2==3) { rslt=22; } else { if (v1==1 && v2==4) { rslt=14; } else { if (v1==1 && v2==5) { rslt=7; } else { if (v1==1 && v2==6) { rslt=0; } else { rslt='?'; }} document.getElementById('txt').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 </select>   <select id="s2" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 </select><p> <input type="text" id="txt" value=""> </body> </html>

  • プルダウン2つで別項目に値を代入したい.その2

    同じような質問ですみません。プルダウン2つで別項目に値を代入する方法のアドバイスを参考にこんなの作ったんですがうまくいかないです。どこがおかしいですか? <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1) { rslt=36; } else { if (v1==1 && v2==2) { rslt=29; } else { if (v1==1 && v2==3) { rslt=22; } else { if (v1==1 && v2==4) { rslt=14; } else { if (v1==1 && v2==5) { rslt=7; } else { if (v1==1 && v2==6) { rslt=0; } else { rslt='?'; }} document.getElementById('txt').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 </select>   <select id="s2" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 </select><p> <input type="text" id="txt" value=""> </body> </html>

  • JavaScriptの計算のNaNの判定について…

    いろいろなアドバイスを参考に以下のようなプログラムを作り、値が正の時はちゃんと計算されるのですが負の時はNaNと判定されてしまいます。どうしたら負の場合でもちゃんと計算されますか?いろいろ調べたのですが見つかりませんでした…。よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=-100; } else { if (a==1 && b==2) { rslt1=-90; } else { if (a==2 && b==1) { rslt1=-80; } else { rslt1=-70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=-95; } else { if (a==1 && c==2) { rslt2=-85; } else { if (a==2 && c==1) { rslt2=-75; } else { rslt2=-65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=-60; } else { if (a==1 && d==2) { rslt3=-50; } else { if (a==2 && d==1) { rslt3=-40; } else { rslt3=-30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } function sum3() { document.getElementById('txt6').value=((document.getElementById('txt4').value + rslt2 + document.getElementById('txt5').value * 2) / 4); } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>   <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>   <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> <input type="text" id="txt6" value=""><p> </body> </html>