- 締切済み
[fromについて] onClickを使用せず合計を出す方法はありますか？
割算の計算式なのですが、計算ボタンを押さずに数字を入力したら自動的に合計を出す方法がわかりません。＞＜； まったくの素人で困っています。何卒よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>かけ算、割り算（警告）</title> <script language="javascript" type="text/javascript"> <!-- function Calculate(){ var Div var a = document.calc_IN.data_A.value; var b = document.calc_IN.data_B.value; if(b == 0){ alert("0で割ることになります"); }else{ Div = a/b; document.calc_OUT.data_D.value=Div; } } // --> </script> </head> <body> <FORM NAME="calc_IN"> <INPUT NAME="data_A" TYPE="text" SIZE=10> <INPUT NAME="data_B" TYPE="text" SIZE=10> <INPUT NAME="GO" TYPE="button" VALUE="計算開始" onClick="Calculate()"> </FORM> <FORM NAME="calc_OUT"> 割り算：<INPUT NAME="data_D" TYPE="text" SIZE=10><BR> </FORM> </body> </html>
- ang-ang
- お礼率50% (1/2)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yukitakao
- ベストアンサー率44% (16/36)
ちなみにこんな感じですね。 <FORM NAME="calc_IN"> <INPUT NAME="data_A" TYPE="text" SIZE=10 onChange="Calculate()">> <INPUT NAME="data_B" TYPE="text" SIZE=10 onChange="Calculate()">> <INPUT NAME="GO" TYPE="button" VALUE="計算開始" onClick="Calculate()"> </FORM>
- yukitakao
- ベストアンサー率44% (16/36)
数字の入力ボックスにonChangeイベントで計算するようにすればいいと思います
関連するQ&A
- javascriptのアラートの表示方法について
javascript初心者です。 javascriptで、計算機を作っていて、数字を入れずに 「＝」（計算）ボタンを押すと、 「未入力です」とアラ－トで表示させたいのですが、 やり方がわかりません。 お手数ですが、ご教示下さい！ よろしくお願いします！！ ※以下、私が作成したものです。 この中のどの部分に、どのような表記をいれたら良いのか、 教えてください。。 <html> <head> <title>計算機</title> <script type="text/javascript"> function Calc() { var a; var b; var c; var ope; a = parseInt(document.form1.textA.value); b = parseInt(document.form1.textB.value); ope = parseInt(document.form1.selOpe.value); switch (ope) { case 1:c = a + b; break; case 2:c = a - b; break; case 3:c = a * b; break; case 4:c = a / b; break; default: break; } document.form1.textC.value = c; } </script> </head> <body> <form name="form1"> <INPUT TYPE="text" NAME="textA"> <select name="selOpe" size=1> <option value="1">＋</option> <option value="2">－</option> <option value="3">×</option> <option value="4">÷</option> </select> <INPUT TYPE="text" NAME="textB"> <input type="button" name="cmdCalc" value="＝" onclick="Calc()"> <INPUT TYPE="text" NAME="textC"> </form> </body> </html>
- ベストアンサー
- Microsoft ASP
- 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
- フォームのvalueを変更する方法
下記はjavaScriptで書いたものですが、javaScriptが有効になっていないと機能しないので perlで同じことをやりたいのですが、フォームのvalueを変更する方法とinnerHTMLの様なボタンをクリックするとテキストを変更する方法が分かりません。 ヒントでも良いので教えていただけませんか？ <HTML> <HEAD><SCRIPT language="JavaScript"> <!-- function nextA(){ var data = document.formA.data.value; data++; document.formA.data.value = data; } //--> function nextB(){ var data = document.formB.data.value; data++; document.formB.data.value = data; document.getElementById("print").innerHTML = data; } //--> </SCRIPT> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HEAD> <BODY> <FORM name="formA"> <input name="data" value="1"> <INPUT type="button" value="足す" onclick="nextA()"> </FORM> <FORM name="formB"> <SPAN id="print">1</SPAN> <INPUT type="button" value="足す" onclick="nextB()"> <INPUT type="hidden" name="data" value="1" > </FORM> </BODY> </HTML>
- ベストアンサー
- CGI
- 同一nameの input type="text" の合計を計算したい
初めて質問させて頂きます。 form 内で同じname名を付けられたテキストフィールドの値の合計を計算し、その値に定数を乗じた値を表示させたいのですが、出来ずに困っております。 name名を別にすれば簡単に出来そうなのですが、このinputが別CGIからの受け取りの関係で数が不定で同一nameが付いてしまいます。（inputは1個以上で上限は無し） CGI側を書き換える事は自分の技術的に不可能なので、このような質問となりました。 以下は自分なりに試行錯誤の末の拙いソースです。 どなたかお分かりになる方、ご教授を宜しくお願い致します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function kakunin() { var sub = Form.getInputs('form1', 'text'); （ var subtotal = ～～～; ここに上で得た数字を合計するみたいなものがくるのかなと・・・） var total = subtotal * 200; document.form1.field_total.value = total; // 合計を表示 } // --> </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <form action="" name="form1"> <table> <tr><td><input name="kazu" type="text" value="2"></td></tr> <tr><td><input name="kazu" type="text" value="1"></td></tr> <tr><td><input name="kazu" type="text" value="3"></td></tr> <tr><td>・・・増えたりします・・・</td></tr> <tr><td><input type="button" size="8" onclick="kakunin()" value="合計を確認"></td></tr> <tr><td><input type="text" name="field_total" size="30" value="total"></td></tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- 小数点
いつも参考にさせて頂いています。 javascriptを勉強し始めたばかりの初心者です。 ある数に0.07を掛けて、 その結果に小数点が発生した場合は切り上げして表示、 発生しなかった場合はそのままで表示ということを 行いと思っているのですが上手くいきません・・・ 例えば、 100×0.01= 1 100×0.02= 2 100×0.03= 3 100×0.04= 4 100×0.05= 5 100×0.06= 6 100×0.08= 8 100×0.09= 9 となりOKですが 100×0.07の場合は7.000000000000001という結果が出るので それに対して切上げを行うと8となり正しい結果が得られません・・・ どうかお分かりの方がいましたら教えて下さい。 <html> <head> <script> function calc() { var xx = parseFloat(document.form1.area1.value); var yy = parseFloat(document.form1.area2.value); var c = xx * yy; document.form1.ans.value = c; } </head> <body> <form name="form1"> <input type="text"name="area1"> <input type="text"name="area2"> <input type="button"value="計算"onclick="calc()"> <input type="text"name="ans"> </form> </body> </html> どうぞ宜しくお願いします。
- 締切済み
- JavaScript
- javascriptの計算フォームでカンマ区切り
下記のようなjavascriptの計算フォームで計算結果に３ケタのカンマ区切りと小数点第2位までで切り捨てるようにしたいのですがどのようにすればよろしいでしょうか？ 「javascript カンマ区切り」で検索したサイトをいろいろ見てみたのですが全然わかりません。 どなたかご教授お願い致します。 <head> <script language="JavaScript" type="text/JavaScript"> <!-- function Multiplication(form){ var test = form.ans.value = eval(form.num1.value)*eval(form.num2.value); return false; } --> </script> </head> <p>A×B×C＝合計</p> <div> <form name="multiplication"> <input type="text" size="6" name="num1"> × <input type="text" size="6" name="num2" onBlur="Multiplication(this.form)"> ＝ <input type="text" size="15" name="ans" class="txtbox">円(税別価格) <input type="reset" value="やり直し"> </form> </div> </body> </html>
- ベストアンサー
- 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
- Javascriptでラジオボタンとチェックボックスの値を足して計算し
Javascriptでラジオボタンとチェックボックスの値を足して計算しようとしました。 しかし、チェックボックス同士の値は足されるのですが、ラジオボタンの値は計算されずにそのまま表示されます。 ラジオボタンの値も足されるようにするにはどうしたら良いでしょうか。 よろしくお願いいたします。 javascript↓ function calc2() { var ss=""; var fs= document.forms; for (var f=0 ; f<fs.length ; f++) { //formが複数ある場合、formの数だけ繰り返し d = fs[f].elements; //dにform内のエレメントを代入 checkvalue = 0; //checkvalueの値を0にする。ここをcheckvalue = ""; にすると、文字列として扱われる for (var i = 0; i < d.length; i++ ) { //form内のエレメントの数だけ繰り返し if (d[i].checked == true) { //チェックボックスがチェックされていたら checkvalue += Number(d[i].value); //checkvalueの値（整数の場合）にそれぞれのエレメントの値（value）を追加していく } } ss += checkvalue; function addFigure(str) { //3桁のカンマ挿入 var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } var sss = addFigure(ss); //ssの値にカンマを挿入してsssに代入 } document.getElementById('ch_all').innerHTML = "\\" + sss; //html本文内のid="ch_all"の場所に書き出す } html↓ <html> <head> <script type="text/javascript"> </script> <script type='text/javascript' src='test_checked2.js'></script> </head> <body> <div id="ch_all" style="background-color: #eeeeee;"> </div> <hr /> <form name="Tform1"> <input type="radio" name="test" value="34500" onclick="calc2()"> \34,500 <input type="radio" name="test" value="15000" onclick="calc2()"> \15,000 <input type="radio" name="test" value="3000" onclick="calc2()"> \3,000 <input type="radio" name="test" value="4444" onclick="calc2()"> \4,444 </form> <form name="Tform2"> <input type="checkbox" name="test2" value="34500" onclick="calc2()"> \34,500 <input type="checkbox" name="test2" value="15000" onclick="calc2()"> \15,000 <input type="checkbox" name="test3" value="3000" onclick="calc2()"> \3,000 <input type="checkbox" name="test4" value="4444" onclick="calc2()"> \4,444 </form> </body> </html>
- ベストアンサー
- JavaScript
- HTMLのinputタグ数が変わる場合のjavascript処理
パターンＡ ～HTML～ <input type='text' name='a[]'> <input type='text' name='a[]'> ～JavaScript～ var n = document.form1.elements["a"][0].value ; var n = document.form1.elements["a"][1].value ; パターンＢ ～HTML～ <input type='text' name='a[]'> ～JavaScript～ var n = document.form1.elements["a"][0].value ; ---(1) パターンＡではエラーが出ないのですが、パターンＢでは(1)のところでエラーになってしまいます。 【elements["a"][0]】の部分を【elements["a"]】とすればエラーは出ません。 どうやら、inputタグが1つしかない場合は、Javascriptでは配列として認識しないようです。 できれば、inputタグが1つの場合でも複数の場合でも、同じJavascriptコードを使いたいのですが、何か良い方法はありますか？
- ベストアンサー
- JavaScript
- inputの中身を書き換える方法について
下記で書き換え実行ボタンを押下すると、初期値1は変更後1に変わるのですが、初期値２と初期値３が変わりませんでした。 そのため、inputの中を書き換えるには、divの場合とは違う書き方をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#change").click(function(){ $("#text1").html("変更後１"); $("#text2").html("変更後２"); $("#text3").html("変更後３"); }); }); // --> </script> <title>title</title> </head> <body> <form> <input id="change" type="button" value="書き換え実行" /> </form> <br /> <div id="text1">初期値１</div> <input type="text" name="text2" id="text2" value="初期値２" /> <input type="hidden" name="text3" id="text3" value="初期値３" /> </body> </html>
- ベストアンサー
- AJAX
お礼
二度にわたるアドバイスを頂いて解決できました！大変助かりました！ ありがとうございます！＞＜