- ベストアンサー
セレクトで選んだ数の計算方法
初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が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"> ５</option> <option value="9"> ９</option> </select> </form> <form name="form1"> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2"> ２</option> <option value="12">１２</option> </select> </form> <input type="text" name="kei" size="10"> <input type="button" value="計算" onmousedown="calcNum()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、 どのようにしたら良いか、教えてください。 根本的に違っているようでしたら、どうやればよいのか教えてください。 よろしくお願いします
- Ruru-heart
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script language="JavaScript"> <!-- function calcNum(){ var num1 = parseInt(document.getElementById('s1').value); var num2 = parseInt(document.getElementById('s2').value); var kei = num1 * num2; document.getElementById('seki').value = kei; } window.onload = calcNum; //--> </script> </head> <body> <form name="form1"> <select size="1" name="select2" id="s2" onchange="calcNum()"> <option value="5">５</option> <option value="9">９</option> </select> <select size="1" name="select1" id="s1" onchange="calcNum()"> <option value="2">２</option><option value="12">１２</option> </select> <hr /> 積：<input id="seki" /> </form> </body> </html>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
formに名前をつけるのは非推奨 別々のformでなく、一つのformの中にあるのであれば オブジェクトわたししてやれば単純な構造で汎用性があるものになりますね <script> function calcNum(f){ var num1 = parseInt(f["select1"].value); var num2 = parseInt(f["select2"].value); var kei = num1 * num2; f["kei"].value=kei; } </script> </head> <body> <form> <select size="1" name="select2" id="s2" onchange="selectChange()"> <option value="5"> ５</option> <option value="9"> ９</option> </select> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2"> ２</option> <option value="12">１２</option> </select> <input type="text" name="kei" size="10"> <input type="button" value="計算" onclick="calcNum(this.form)"> </form>
お礼
yambejp様 ありがとうございました。 最初、こちらのかんたんコードを目指していたのかも^^;; ただ、別々のフォームだったため考えが粉砕したようです(T-T) どのみち表示部がいい加減ですね。 また相談させてください。 ありがとうございました。
関連するQ&A
- 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>
- ベストアンサー
- JavaScript
- ボタンを押して計算結果を出したい
下記のもの、うまくいきません。 どのようにしたらよいのでしょうか？ 教えてください。よろしくお願いします。 <HTML> <HEAD> <TITLE>Calculator</TITLE> <SCRIPT language = "JavaScript"> function calc(Submit){ Num1 = document.foam1.Num1; Num2 = document.foam1.Num2; Ans = document.foam1.Ans; document.foam1.Ans.value = s1 Ans s2; } </SCRIPT> </HEAD> <PRE> 数値1 演算子 数値2 答え</PRE> <FORM METHOD=GET ACTION="/calc/calc.exe"> <INPUT NAME="Num1" VALUE="" onChange="calc()"> <SELECT NAME="Opr" SIZE=1 VALUE="" onChange="calc()"> <OPTION>+<OPTION>-<OPTION>*<OPTION>/</SELECT> <INPUT NAME="Num2" VALUE="" onChange="calc()"> = <INPUT NAME="Ans" VALUE="" onChange="calc()"> <INPUT TYPE="Submit" VALUE="計算"> </FORM> <H2></H2> </HTML>
- 締切済み
- JavaScript
- セレクトボックス自動表示
以前http://okwave.jp/qa/q6872183.htmlにてご質問させていただきました。 合計の数値までだすことはできたのですが、selectboxを数値の分だけだすのができなくて困っています。 <script type="text/javascript"> function calculate(){ var test1 = parseInt(document.getElementById('test1').options[document.getElementById('test1').selectedIndex].value); var test2 = parseInt(document.getElementById('test2').options[document.getElementById('test2').selectedIndex].value); var test3 = parseInt(document.getElementById('test3').options[document.getElementById('test3').selectedIndex].value); var test4 = parseInt(document.getElementById('test4').options[document.getElementById('test4').selectedIndex].value); if(isNaN(test1)){test1 = 0;} if(isNaN(test2)){test2 = 0;} if(isNaN(test3)){test3 = 0;} if(isNaN(test4)){test4 = 0;} document.getElementById('total').innerHTML = test1 + test2 + test3 + test4; } </script> <select name="test1" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test2" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test3" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test4" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test5" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <p id="total">0</p> がソースになります。 お分かりの方がいらっしゃいましたらご教示お願いします。
- ベストアンサー
- JavaScript
- 数によってボタンを有効化したい
先日もこちらでお世話になりました。 例えばアメ玉の販売をするのにA,B,C,3種類があり、合計数がDと同じにならないと実行ボタンが押せないようにしたいのですが、うまくいきません。 <head> <SCRIPT TYPE="text/javascript"> <!-- function check(obj){ var f=obj.form; var valA=parseInt(f.A.value); var valB=parseInt(f.B.value); var valC=parseInt(f.C.value); var valD=parseInt(f.D.value); if (valA+valB+valC > valD || valA+valB > valD || valB+valC > valD || valA+valC > valD){ alert('A,B,Cの和は100以下に設定ください') if(obj.type=="select-one") obj.selectedIndex=0; else if(obj.type=="text") obj.value=0; obj.focus(); } } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- function radio(valD){ if (valD.value == valA+valB+valC || valA+valB || valB+valC || valA+valC ) valD.form.submit.disabled = false; else valD.form.submit.disabled = true; } //--> </SCRIPT> </head> <body bgcolor=#ffffff> <form name="" method="post" action="shop.cgi"> <b>☆飴玉 </b> <br> <b>個数配分</b><br> A:<select name="A" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> B:<select name="B" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> C:<select name="C" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> D:<input type="text" name="D" readonly value="50" class="num"></br> <input type="submit" value="申し込む" name="submit" disabled> </form> </body> 詳しくわからないのですが、イベントハンドラは2つ続けて書けないのでしょうか。。。 どなたかお教え頂けたら幸いです。
- ベストアンサー
- JavaScript
- selectのnameが配列の場合
説明がわかりにくいかもしれませんがよろしくお願いいたします。 セレクトボックスが選択されると、テキストフィールドが変わるというJavaScriptを作成しています。 nameに配列を使った場合、elementsを使用すればいいと言うことまでは分かり１つだけの場合は成功しました。 しかし、同じname(配列)のセレクトボックスとテキストフィールドが複数ある場合は成功しません。 PHPでデータベースに格納する際に、どうしてもセレクトボックスとテキストフィールドは配列にして置かないといけないのですが、この場合どうすれば、成功するでしょうか？ 現在以下のようにソースを書いて失敗しています。 ご教授の程よろしくお願いいたします。 ↓↓JavaScript部分 <script> function selectChange(){ var no = document.test1.elements['member[]'].selectedIndex; if(no==1){ document.test1.elements['point[]'].value =0; } else{ document.test1.elements['point[]'].value =""; } } </script> ↓↓HTML部分 <form name='test1'> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> <br> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> </form> //bbbの場合だけ、テキストフィールドのデフォルト値を0にしたい
- ベストアンサー
- JavaScript
- insertRowメソッド内で計算式を書く方法
http://jsajax.com/Articles/TableInsertRow/157を参考に、[行を挿入]ボタンをクリックすると最終行の下に行が追加され、その中にテキストボックスを配置し計算を行うようにしたいと思い、下記のソースを記述しました。 そして追加した行で正常に計算を行うために、insertRow内のinnerHTMLのgoods_a_3の3の部分を動的に設定したり、calc内の計算式を動的にループさせる必要があると思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <script type="text/javascript"> <!-- window.onload = function() { document.getElementById("btnInsert").onclick = insertRow; } function insertRow() { var tbl = document.getElementById("Table1"); var row = tbl.insertRow(2); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = "<input type=\"text\" name=\"goods_a_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />*"; cell2.innerHTML = "<input type=\"text\" name=\"goods_b_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />="; cell3.innerHTML = "<input type=\"text\" name=\"ans3\" size=\"8\" value=\"0\" disabled=\"disabled\" />"; } function calc(){ document.form1.ans1.value = document.form1.goods_a_1.value * document.form1.goods_b_1.value; document.form1.ans2.value = document.form1.goods_a_2.value * document.form1.goods_b_2.value; } // --> </script> </head> <body> <form action="#" name="form1" id="form1"> <table id="Table1" border="1"> <tr> <td><input type="text" name="goods_a_1" size="3" value="0" onchange="calc();" />*</td> <td><input type="text" name="goods_b_1" size="3" value="0" onchange="calc();" />=</td> <td><input type="text" name="ans1" size="8" value="0" disabled="disabled" /></td> </tr> <tr> <td><input type="text" name="goods_a_2" size="3" value="0" onchange="calc();" />*</td> <td><input type="text" name="goods_b_2" size="3" value="0" onchange="calc();" />=</td> <td><input type="text" name="ans2" size="8" value="0" disabled="disabled" /></td> </tr> </table> </form> <br /> <input id="btnInsert" type="button" value="行を挿入" /> 以上、よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトの内容に応じてラジオボタンを自動選択する方法
<script type="text/javascript"> function selectChange(){ var selectedNum = document.form1.Q1.selectedIndex; if(selectedNum == 0 | selectedNum == 1) { document.formGeneratorForm1.Q2[0].disabled=false; document.formGeneratorForm1.Q2[1].disabled=false; }else{ document.formGeneratorForm1.Q2[0].disabled=true; document.formGeneratorForm1.Q2[1].disabled=true; } } </script> <select name="Q1" onchange="selectChange()"> <option value="0" selected >AAA</option> <option value="1" >BBB</option> <option value="2" >CCC</option> </select> <input type="radio" name="Q2" value="0" />000 <input type="radio" name="Q2" value="1" checked/>111 上記のソースでQ1でCCCを選択した時に、Q2で000を選択していたとしても111に自動的にチェックを入れる方法をご教授下さい。よろしくお願い致します。
- ベストアンサー
- JavaScript
- Javascriptでセレクトメニューの選択チェックの方法
Javascriptでセレクトメニューのフォームをチェックしたいのですが、 リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=＼"JavaScript＼"> <!-- function Check() { var str = document.form.a.value; if(document.form.a.value == "0") { alert("番号を選択して下さい"); } //--> </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>
- ベストアンサー
- JavaScript
- javascriptでセレクトメニューの連動と自動計算
最近、javascriptの勉強をさせてもらっております。javascriptでは自動計算ができると聞き、ハードルが高いとは思うのですが、占い好きの私に以下の事に挑戦させて下さい。 セレクトメニューの連動を使用して、誕生月を選んだら、その月に応じて異なった好きな食べ物のメニューが表示されるという事がまず最初。 そして、誕生月の各月の項目にそれぞれ異なった数字を格納して下の「S」に代入し、それと同じように、食べ物のメニューの項目のそれぞれに３個ワンセットの異なった数字を格納して下の「A,B,C」に代入したいのです。 連動はここまでで、新たに好きな３桁の数字のセレクトメニューと 好きな２桁の数字のセレクトメニューを作り、独自の計算式(1)～(6)を経て、ラッキーナンバーを出すという事をしたいのですが、セレクトメニューの各月の項目に数字を格納というか、その項目を選ぶ事により、そこの項目に設定した数字を計算式に代入させる(Sに代入)やり方が解りません。 同様に食べ物のある項目を選択すると、その項目に設定した３個ワンセットの数字を計算式に代入させる(A,B,Cに代入)やり方が解りません。 解る部分は、ある書物を参考にして書いてみましたが、つなぎ合わせた感じになってしまって、すみません。そして説明の仕方がややこしくなってしまいましたがよろしくお願いします。(独自の計算式(1)～(6)の内容は気にしないで下さい) ---------------------------------------------------------------- <html> <head> <title>あなたのラッキーナンバー</title> </head> <body> <form name="calcuation"> //セレクトメニューの連動部分が解りません。こんな感じにしたいのですが。 私の誕生月は <select name="month" onChange="calculation();"> <option value="23">1月 // ここには数字の「23(Sに代入)」が格納されている <option value="12">2月 // ここには数字の「12(Sに代入)」が格納されている <option value="56">3月 <option value="89">4月 <option value="5" selected>5月 <option value="88">6月 <option value="70">7月 <option value="">8月 <option value="">9月 <option value="">10月 <option value="">11月 <option value="">12月 </select>で、 (例えば、３月を選択すると食べ物メニューが出て選択する) 好きな食べ物は <select name="food" onChange="calculation();"> <option>トマト <option value="8,24,200">マグロ //ここには数字の「8,24,200(A,B,Cにワンセットでそれぞれに代入)」が格納されている <option value="2,205,1555">みかん //ここには数字の「2,205,1555(A,B,Cにワンセットでそれぞれに代入)」が格納されている <option>納豆 <option selected>豆腐 <option>ラーメン </select> です つまり、１月生まれでマグロが好きな場合、選択した時、「S」→「23」「A」→「8」「B」→「24」「C」→「200」を同時に代入させたいです。 ここから下の部分は参考書を元に書いてみました。 私の好きな３桁の数字は <select name="number_1" onChange="calculation();"> <option>100 <option>200 <option>300 <option>400 <option selected>500 <option>600 <option>700 <option>800 <option>900 </select>で、私の好きな２桁の数字は <select name="number_2" onChange="calculation();"> <option>10 <option>20 <option>30 <option>40 <option selected>50 <option>60 <option>70 <option>80 <option>90 </select> あなたのラッキーナンバーは<input type="text" name="number_luckey" class="text_color" value="0" size="8" maxlength="6">です。 </form> </body> </html> <script type="text/javascript"> // この辺に何かの記述が必要ですよね。 function calculation() { // 好きな３桁の数字 var number_1 = parseInt(document.calcuation.number_1[document.calcuation.number_1.selectedIndex].text); // 好きな２桁の数字 var number_2 = parseInt(document.calcuation.number_2[document.calcuation.number_2.selectedIndex].text); // 独自の計算式(1) var number_3 = number_2 * 365; // 独自の計算式(2) var number_4 = (number_3 / A) - S; // 独自の計算式(3) var number_5 = number_4 / B; // 独自の計算式(4) var number_6 = number_5 * C; // 独自の計算式(5) var number_7 = number_1 * number_2 / 20 * 365; // 独自の計算式(6) var number_luckey = number_7 - number_6; document.calcuation.number_luckey.value = number_luckey; return; } </script>
- 締切済み
- JavaScript
- 見よう見まねで以下のように作成してみたのですが
見よう見まねで以下のように作成してみたのですが 作動しませんでした。 （当方javascript初心者です） どこに問題があるのか、指摘してくださる方を探しています。 極めて初歩的なところで誤っているのだろうと思いますので 質問するのも恐縮なのですが・・・ どなたかよろしくお願いいたします。 ------------------------------------------ <HTML> <HEAD> <script language="JavaScript"> function calc(){ var a = document.form1.001.value; var b = document.form1.002.value; var c = document.form1.003.value; var d = document.form1.004.value; var total = a + b + c + d; document.form1.field.value = total; } </script> </HEAD> <BODY> <BR><BR> <form name="form1"> <Select name="001"> <Option value="10">case1 <Option value="20">case2 </Select>ケース <BR><BR> <INPUT size="15" type="text" name="002">number <BR><BR> <Select name="003"> <Option value="100">volume1 <Option value="200">volume2 <Option value="300">volume3 </Select>ボリューム <BR><BR> <Select name="004"> <Option value="0">N <Option value="50">size1 <Option value="100">size2 <Option value="150">size3 </Select>サイズ <BR><BR> <INPUT type="button" name="calc" value="計算" onClick="calc()"><BR><BR> <input size="15" readonly="readonly" name="field" type="text">total </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
お礼
auty様 ありがとうございました。 おかげで表示されるようになりました。 表示部など気を抜かないで最後までということですね(T-T) すぐに回答がほしいにしてあったのに、結局寝落ちしてしまい お礼が遅れてすみませんでした。 急にJavascriptをやることになって右往左往しています。 また初心者的質問をすると思いますが、よろしくお願いします。 本当に感謝です♪ありがとうございました。