- ベストアンサー
同じFunctionで、同じ計算させたいのですが
私は今、以下のようにここで教えていただいたプログラムを参考に組んでは見たものの、同じ行をいくつもコピペすると計算されなくなってしまいます。1行だけの計算でしようとするとうまく計算されるのですが・・・ <HTML> <HEAD> <TITLE> タイトルバーに表示されるテキスト </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--JavaScript function SUM(){ if(!isNaN(document.sum.text1.value) && !isNaN(document.sum.text2.value) && !isNaN(document.sum.text3.value) && document.sum.text1.value && document.sum.text2.value && document.sum.text3.value){ document.sum.text4.value = eval(document.sum.text1.value) + eval(document.sum.text2.value) - eval(document.sum.text3.value) } if( !isNaN(document.sum.text5.value) && !isNaN(document.sum.text6.value) && document.sum.text5.value && document.sum.text6.value){ document.sum.text7.value = eval(document.sum.text4.value) + eval(document.sum.text5.value) + eval(document.sum.tex6.value) } } //--> </SCRIPT> </HEAD> <BODY> <FORM NAME="sum" onSubmit="SUM();return false;"> A<INPUT TYPE="text" NAME="text1" onChange="SUM()" SIZE="10"><BR> B<INPUT TYPE="text" NAME="text2" onChange="SUM()" SIZE="10"><BR> C<INPUT TYPE="text" NAME="text3" onChange="SUM()" SIZE="10"><BR> D=A+B-C<INPUT TYPE="text" NAME="text4" onChange="SUM()" SIZE="10"><BR> E<INPUT TYPE="text" NAME="text5" onChange="SUM()" SIZE="10"><BR> F<INPUT TYPE="text" NAME="text6" onChange="SUM()" SIZE="10"><BR> G=D+E+F<INPUT TYPE="text" NAME="text7" onChange="SUM()" SIZE="10"><BR> </FORM> </BODY> </HTML>
- obahiro
- お礼率46% (22/47)
- JavaScript
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
たまコです。 NIGHT2000さんの方法でFORMを沢山生成しても構わないのなら、 こんな感じにもできますね。 ＃インデントのため、全角スペース入れてます。ご注意。 <html> <head> <title>タイトルバーに表示されるテキスト</title> <script language="JavaScript"> <!-- function TotalSum(i) { var evalStr = eval("document.sum" + i); with(evalStr) { if(!isNaN(text1.value) && !isNaN(text2.value) && !isNaN(text3.value) && text1.value && text2.value && text3.value) { text4.value = eval(text1.value) + eval(text2.value) - eval(text3.value); } if( !isNaN(text5.value) && !isNaN(text6.value) && text5.value && text6.value) { text7.value = eval(text4.value) + eval(text5.value) + eval(text6.value); } } } //--> </script> </head> <body bgcolor="#ffffff"> <script language="JavaScript"> <!-- var i; for(i = 1; i < 5; i++) { document.write('<form name="sum' + i + '" onSubmit="TotalSum(' + i + ');return false;">\n'); document.write('A<input type="text" name="text1" onChange="TotalSum(' + i + ')" size="10"><br>\n'); document.write('B<input type="text" name="text2" onChange="TotalSum(' + i + ')" size="10"><br>\n'); document.write('C<input type="text" name="text3" onChange="TotalSum(' + i + ')" size="10"><br>\n'); document.write('D=A+B-C<input type="text" name="text4" onChange="TotalSum(' + i + ')" size="10"><br>\n'); document.write('E<input type="text" name="text5" onChange="TotalSum(' + i + ')" size="10"><br>\n'); document.write('F<input type="text" name="text6" onChange="TotalSum(' + i + ')" size="10"><br>\n'); document.write('G=D+E+F<input type="text" name="text7" onChange="TotalSum(' + i + ')" size="10"><br>\n'); document.write('</form>\n'); } //--> </script> </body> </html> やりすぎ？(A^-^;) でもこれならfor文の中の「i = 1; i < 5;」の部分を変更するだけで いくらでも増やせますよ（笑 まぁ、邪道ですがこんな方法もあるという事で。。。 参考になれば幸いです。
その他の回答 (4)
ソースありがとうございます。 えと、やはりinputタグをそのままコピペして使ってらっしゃったのですね(^^; name属性は同じ名前を付けることが出来ないので、エラーを起こしてしまいます。 簡略化したソースを考えて教えて差し上げたいのですが、ちょっと今仕事がたてこんでまして・・・ めちゃ基本仕様のソースでよいでしょうか(^^; フォーム名を変え、その分のfunctionの追加にて、作成してます。 <HTML> <HEAD> <TITLE> タイトルバーに表示されるテキスト </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--JavaScript function SUM(){ if(!isNaN(document.sum.text1.value) && !isNaN(document.sum.text2.value) && !isNaN(document.sum.text3.value) && document.sum.text1.value && document.sum.text2.value && document.sum.text3.value){ document.sum.text4.value = eval(document.sum.text1.value) + eval(document.sum.text2.value) - eval(document.sum.text3.value) } if( !isNaN(document.sum.text5.value) && !isNaN(document.sum.text6.value) && document.sum.text5.value && document.sum.text6.value){ document.sum.text7.value = eval(document.sum.text4.value) + eval(document.sum.text5.value) + eval(document.sum.text6.value) } } function SUM2(){ //このnunctionを追加してます if(!isNaN(document.sum2.text1.value) && !isNaN(document.sum2.text2.value) && !isNaN(document.sum2.text3.value) && document.sum2.text1.value && document.sum2.text2.value && document.sum2.text3.value){ document.sum2.text4.value = eval(document.sum2.text1.value) + eval(document.sum2.text2.value) - eval(document.sum2.text3.value) } if( !isNaN(document.sum2.text5.value) && !isNaN(document.sum2.text6.value) && document.sum2.text5.value && document.sum2.text6.value){ document.sum2.text7.value = eval(document.sum2.text4.value) + eval(document.sum2.text5.value) + eval(document.sum2.text6.value) } } //--> </SCRIPT> </HEAD> <BODY> <TABLE> <FORM NAME="sum"> <TR> <TD>A<INPUT TYPE="text" NAME="text1" onChange="SUM()" SIZE="10"><BR></TD> <TD>B<INPUT TYPE="text" NAME="text2" onChange="SUM()" SIZE="10"><BR></TD> <TD>C<INPUT TYPE="text" NAME="text3" onChange="SUM()" SIZE="10"><BR></TD> <TD>D=A+B-C<INPUT TYPE="text" NAME="text4" onChange="SUM()" SIZE="10"><BR></TD> <TD>E<INPUT TYPE="text" NAME="text5" onChange="SUM()" SIZE="10"><BR></TD> <TD>F<INPUT TYPE="text" NAME="text6" onChange="SUM()" SIZE="10"><BR></TD> <TD>G=D+E+F<INPUT TYPE="text" NAME="text7" onChange="SUM()" SIZE="10"><BR></TD> </TR> </FORM> <!--一度フォームを閉じてます--> <FORM NAME="sum2"> <!--違うフォームとして作成してます--> <TR> <TD>A<INPUT TYPE="text" NAME="text1" onChange="SUM2()" SIZE="10"><BR></TD> <TD>B<INPUT TYPE="text" NAME="text2" onChange="SUM2()" SIZE="10"><BR></TD> <TD>C<INPUT TYPE="text" NAME="text3" onChange="SUM2()" SIZE="10"><BR></TD> <TD>D=A+B-C<INPUT TYPE="text" NAME="text4" onChange="SUM2()" SIZE="10"><BR></TD> <TD>E<INPUT TYPE="text" NAME="text5" onChange="SUM2()" SIZE="10"><BR></TD> <TD>F<INPUT TYPE="text" NAME="text6" onChange="SUM2()" SIZE="10"><BR></TD> <TD>G=D+E+F<INPUT TYPE="text" NAME="text7" onChange="SUM2()" SIZE="10"><BR></TD> </TR> </FORM> </table> </BODY> </HTML>
お礼
お忙しいところ、ありがとうございます。 NIGHT2000さんの指摘されたように、変数をいくつも作ってしてみましたがこちらの担当者によると、レコードが多いときには50件の登録があるということで、そんな・・・って感じで簡略化できないか考えております。 いろいろと、お力になっていただきありがとうございます。 もし、時間にゆとりができたと時は、よろしくお願いいたします。 もう少し、上のソースを参考に考えさせていただきます。
yu-kichanさんの言うとおり、上記のソースでは「tex6」の記述ミス以外に問題はなさそうです。 「コピペで複数行に増やすして問題の出たソース」というのを見せていただけませんか？ ちなみに、 ＞HTMLのタグをそのままコピーして貼り付けて というのは、 inputタグの「NAME="text5"」などの記述もそのまま使っているということでしょうか？？ もしそうだとしたら動きません・・・(^^; NAME属性は、すべて別の名前に設定しなくてはなりません。そして、追加した分のソースをスクリプト側にも追加する必要があります。 検討違いなことを言っていたらごめんなさい。(^^; とにかく問題のソースがわからないので・・・
お礼
HTMLの部分は、こういう感じでコピペしています。 <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <TABLE> <FORM NAME="sum" onSubmit="SUM();return false;"> <TR> <TD>A<INPUT TYPE="text" NAME="text1" onChange="SUM()" SIZE="10"><BR></TD> <TD>B<INPUT TYPE="text" NAME="text2" onChange="SUM()" SIZE="10"><BR></TD> <TD>C<INPUT TYPE="text" NAME="text3" onChange="SUM()" SIZE="10"><BR></TD> <TD>D=A+B-C<INPUT TYPE="text" NAME="text4" onChange="SUM()" SIZE="10"><BR></TD> <TD>E<INPUT TYPE="text" NAME="text5" onChange="SUM()" SIZE="10"><BR></TD> <TD>F<INPUT TYPE="text" NAME="text6" onChange="SUM()" SIZE="10"><BR></TD> <TD>G=D+E+F<INPUT TYPE="text" NAME="text7" onChange="SUM()" SIZE="10"><BR></TD> </TR> <TR> <TD>A<INPUT TYPE="text" NAME="text1" onChange="SUM()" SIZE="10"><BR></TD> <TD>B<INPUT TYPE="text" NAME="text2" onChange="SUM()" SIZE="10"><BR></TD> <TD>C<INPUT TYPE="text" NAME="text3" onChange="SUM()" SIZE="10"><BR></TD> <TD>D=A+B-C<INPUT TYPE="text" NAME="text4" onChange="SUM()" SIZE="10"><BR></TD> <TD>E<INPUT TYPE="text" NAME="text5" onChange="SUM()" SIZE="10"><BR></TD> <TD>F<INPUT TYPE="text" NAME="text6" onChange="SUM()" SIZE="10"><BR></TD> <TD>G=D+E+F<INPUT TYPE="text" NAME="text7" onChange="SUM()" SIZE="10"><BR></TD> </TR> ・ ・ ・ </FORM> </BODY> </HTML> ということは、それぞれに、Functionを作っていかなければならないのでしょうか？すっきり簡単にする方法がありましたら、ぜひお願いいたします。
- yu-kichan
- ベストアンサー率40% (4/10)
>HTMLで、一行だけだときちんと処理してくれるのですが、コピペで、複数行に増やすと処理してくれないんです・・・ すみません。現象が分かりません。 上のソースをhtmlにしてやってみると、ちゃんと計算されますが？ 複数行に増やすというのは、どのようにしているのですか？
補足
え～～とですね。 今は、WEB画面から、例えば、住所録みたいなのを作って、それに何人か分をまとめてDBに落とすというものを作っているんです。 そこで、一人ぶんのデータを入力したらその都度保存していくのではなく、何人かぶんをまとめてDBに落とすため、同じフィールドをまとめて何行か表示させて一気に入力しようというものです。 Excelのシートで、表を想像していただくと分かりやすいと思います。 複数行に増やすときは、HTMLのタグをそのままコピーして貼り付けて、一つのテーブルに格納しています。
- yu-kichan
- ベストアンサー率40% (4/10)
ソースの15行目 document.sum.text6.value → document.sum.tex6.value になってます。
お礼
お返事ありがとうございます。 「text6」にしましたが、やはり無理でした・・・ function SUM(){・・・} のところの問題だとは思うのですが。 HTMLで、一行だけだときちんと処理してくれるのですが、コピペで、複数行に増やすと処理してくれないんです・・・ どうしたらよろしいのでしょう・・・
関連するQ&A
- CFLOOPで計算させたいのですが（２）
先ほどとの関連になりますが、 <SCRIPT LANGUAGE="JavaScript"> <!--JavaScript function TotalSum(i) { var evalStr = eval("document.sum" + i); with(evalStr) { if(!isNaN(text1.value) && !isNaN(text2.value) && !isNaN(text3.value) && text1.value && text2.value && twxt3.value); { text4.value = eval(text1.value) + eval(text2.value) - eval(twxt3.value); } if( !isNaN(text5.value) && !isNaN(text6.value) && text5.value && text6.value); { text7.value = eval(text4.value) + eval(text5.value) + eval(text6.value); } } } // --> </script> </head> <body> <TABLE BORDER="1"> <FORM name="myform" action="url" method="post" onSubmit="TotalSum(' + i + ');return false;"> <cfloop index="i" from="1" to="10"> <TR> <TD><input type="text" name="text1" onChange="TotalSum('+i+')" value="0"></TD> <TD><input type="text" name="text2" onChange="TotalSum('+i+')" value=""></TD> <TD><input type="text" name="text3" onChange="TotalSum('+i+')" value="0"></TD> <TD><input type="text" name="text4" onChange="TotalSum('+i+')" value="0"></TD> <TD><input type="text" name="text5" onChange="TotalSum('+i+')" value=""></TD> <TD><input type="text" name="text6" onChange="TotalSum('+i+')" value=""></TD> <TD><input type="text" name="text7" onChange="TotalSum('+i+')" value="0"></TD> </TR> </cfloop> </form> </TABLE> </body> また、見当はずれなこと言っていたらすみません。
- 締切済み
- その他(データベース)
- 計算結果のテキスト表示
JavaScript計算式で結果を表示したいのですが できません。 テキストBOXには結果を入れれるのですが、 テキストBOXでなく文字として結果を出したいのですが でません。 以下ソースです。 19行目が表示希望箇所です。 <SCRIPT language="javascript"> <!-- function calc() { with(document.f) { syoukei.value = goods1.value * goods2.value * (goods3.value * 0.01) ; syoukei.value = Math.round(syoukei.value) } } // --> </SCRIPT> <FORM name="f"> 縦<INPUT type="text" name="goods1" size="3" onChange="calc();">m * 横<INPUT type="text" name="goods2" size="3" onChange="calc();">m * 厚み<INPUT type="text" name="goods3" size="3" onChange="calc();">cm<BR> 60L <INPUT type="text" name="syoukei" size="5">袋<BR> <SCRIPT language="javascript"> <!-- document.write(syoukei); } // --> </SCRIPT> </FORM>
- ベストアンサー
- JavaScript
- Javaで計算結果によって文字色を変えたい
下記のような計算プログラムを検討しています。 全くの素人なので、ネットで参考になるものを探して、やっとここまで出来ました。 計算結果の値によって文字色を変えたいのですが上手くいきません。 例えば、数値が100以上であれば青、200以上であれば、赤・・・というように設定したいのですが、どのように記述すれば良いでしょうか。 よろしくお願い致します。 <HTML> <HEAD> <TITLE>計算</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-- function keisan1(x1,x2){ a=0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))*1000; return a.toFixed(0);} function keisan2(x1,x2,x3,x4,s1){ b=eval(x2)+Math.pow((0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))),2)*eval(document.getElementById('s1').value)*eval(x3)+0.01*eval(x4); return b.toFixed(2);} function keisan3(x1,x2){ c=200*Math.pow((eval(x1)/10),2)*(eval(x2)); return c.toFixed(0);} //--> </SCRIPT> <H3>TEST</H3> <FORM name="fk">※ 条件を入力して下さい <BR> <BR> 条件(1)<SELECT name="s1" id="s1" onchange="b();"> <OPTION value="0.2">A</OPTION> <OPTION value="0.9">B</OPTION> </SELECT> <BR> 条件(2)<INPUT size="10" type="text" name="d1" style="text-align:right"><BR> 条件(3)<INPUT size="10" type="text" name="d2" style="text-align:right"><BR> 条件(4)<INPUT size="10" type="text" name="d3" style="text-align:right"><BR> 条件(5)<INPUT size="10" type="text" name="d4" style="text-align:right"><BR> <BR> <INPUT type="button" value="計算開始" onclick="document.fk.calc1.value=keisan1(document.fk.d1.value,document.fk.d2.value);document.fk.calc2.value=keisan2(document.fk.d1.value,document.fk.d2.value,document.fk.d3.value,document.fk.d4.value,document.fk.s1.value);document.fk.calc3.value=keisan3(document.fk.d1.value,document.fk.d2.value);"> <BR> 回答(1)<INPUT size="10" type="text" name="calc1" style="text-align:right"> <BR> 回答(2)<INPUT size="10" type="text" name="calc2" style="text-align:right"> <BR> 回答(3)<INPUT size="10" type="text" name="calc3" style="text-align:right"> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- javascriptでフォームの値の計算
javascript1か月目の初心者です。 7つのテキストフィールドに数値を代入させて合計と平均（最後には標準偏差）を計算しようと思ってます。 以下のように考えましたが、うまくいきません。 strが文字列として？扱われてしまっているようです。 strをevalで囲んでみてもダメです。 詳しい方教えてください。 <!--スクリプト1--> <SCRIPT LANGUAGE="JavaScript"> <!-- function f_check() { if(document.F1.num1.value!=""&&document.F1.num2.value!=""&&document.F1.num3.value!=""&&document.F1.num4.value!=""&&document.F1.num5.value!="" &&document.F1.num6.value!=""&&document.F1.num7.value!=""){ str=0 for(var i = 0;i<document.F1.length;i++){ str+=document.F1[i].value; } alert('合計は'+str+"です"); avrg = (str)/document.F1.length; alert('平均は'+avrg+'です'); //ここから標準偏差の計算(略)。 } // --> </SCRIPT> <form method="post" name="F1" onSubmit="return f_check()"> 数値を入れてください<input type="text" name="num1" size="5"><br> 数値を入れてください<input type="text" name="num2" size="5"><br> 数値を入れてください<input type="text" name="num3" size="5"><br> 数値を入れてください<input type="text" name="num4" size="5"><br> 数値を入れてください<input type="text" name="num5" size="5"><br> 数値を入れてください<input type="text" name="num6" size="5"><br> 数値を入れてください<input type="text" name="num7" size="5"><br> <INPUT TYPE=SUBMIT VALUE="平均をとる"></FORM>
- 締切済み
- 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
- for文の使い方について
こんばんはpiyottiと申します。 forループを使用してtextの値を取得したいと思っています。 「document.myFORM.namei・・・」の「i」をループカウンターとして 「name1、name2・・・」と増やしていきたいのですがうまくいきません。 どうかよろしくお願いいたします。 <script Language="JavaScript"><!-- function calc(form) { n = 0; for (i=0; i<4; i= i+;) n += eval(document.myFORM.namei.value); } // --></script> <form name="myFORM"> 数値１：<input type="text" onChange="calc(this.form, this)" name="name1"> 数値２：<input type="text" onChange="calc(this.form, this) name="name2"> 数値３：<input type="text" onChange="calc(this.form, this) name="name3"> 数値４：<input type="text" onChange="calc(this.form, this) name="name4"><br> </form>
- ベストアンサー
- JavaScript
- サーバーにupすると動作しません。
こんにちは。お世話様になります。 JavaScriptで設定した後、htmlファイルで保存し、サーバーにupしますが、htmlファイルの段階では、きちんと動作するのですが、サーバーにupすると動作しなくなり、困っております。 以下が、そのコードです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // テキスト領域の合計を計算 function ttlValue() { txt = 6; // テキスト領域の総数 ttl = 0; for(i=0; i<txt; i++) { if(document.nForm.elements[i].value != "") { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <FORM name="nForm"> 数値を入力してください。合計値を表示します。<BR> <INPUT type="text" name="t1" onChange="ttlValue()"><BR> <INPUT type="text" name="t2" onChange="ttlValue()"><BR> <INPUT type="text" name="t3" onChange="ttlValue()"><BR> <INPUT type="text" name="t4" onChange="ttlValue()"><BR> <INPUT type="text" name="t5" onChange="ttlValue()"><BR> <INPUT type="text" name="t6" onChange="ttlValue()"><BR> <BR> 合計<INPUT type="text" name="result" size="10"> </FORM> </BODY> </HTML> 沢山のテキストボックスに入力された数字の合計を出したいのですが、サーバーにupした途端、なんの動作もしなくなります。 こちらで教えていただいた、半角文字しか入力できないようにするコードは、サーバーにupしても問題なく動作します。 原因としては、何が考えられるでしょうか。別にこのコードではなくてもよいので、他に、代替できるようなコードはありますでしょうか。 windowsXP、IE6.0を使用しております。 皆様、お忙しいとは思いますが、何卒、ご教示の程、宜しくお願い致します。
- ベストアンサー
- JavaScript
- textbox間の結合時、空白の時は、スペースを省きたい
<script type="text/javascript"> <!-- function ketugou(){ document.f.q.value=document.f.t1.value+" "+document.f.t2.value+" "+document.f.t3.value+" "+document.f.t4.value+" "+document.f.t5.value; } //--> </script> <form name="f"> キーワードを入力：<br> <input type="text" size="55" name="t1"><br> <input type="text" size="55" name="t2"><br> <input type="text" size="55" name="t3"><br> <input type="text" size="55" name="t4"><br> <input type="text" size="55" name="t5"><br> <input type="button" name="connect" value="結合" onClick="ketugou()"><br> 結合時の内容を表示：<br> <input type="txt" name="q" size="55" maxlength="255" ><br> </form> で、空白のテキストボックスの場合は、スペース（" "）なしで、 結合させたいんですが、どうしたら、良いのでしょうか？
- ベストアンサー
- JavaScript
- Java 計算結果の表示ボックスの書式を変えたい
計算結果が表示されるボックスの表示（回答(1)(2)(3)のみ）を下記のようなバリエーションで変えたいのですが、どのように記述すれば良いでしょうか。 (1)枠線の色を変えたい (2)枠線の太さを変えたい (3)枠線内（ボックス）を一定の時間で、任意の色で点滅させたい（現在は条件をつけて枠内の色が変わるように記述しています） よろしくお願い致します。 <HTML xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>計算テスト</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <FONT SIZE="3"> <SCRIPT language="JavaScript"> <!-- function keisan1(x1,x2){ a=0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))*1000; return a.toFixed(0);} function keisan2(x1,x2,x3,x4,s1){ b=eval(x2)+Math.pow((0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))),2)*eval(document.getElementById('s1').value)*eval(x3)+0.1*eval(x4); return b.toFixed(2);} function keisan3(x1,x2){ c=20*(eval(x1)/10)*(eval(x1)/10)*(eval(x2)); return c.toFixed(0);} function calc(){ // ← 計算ボタンが押されたらこの関数が呼ばれる var d1 = document.fk.d1; var d2 = document.fk.d2; var d3 = document.fk.d3; var d4 = document.fk.d4; var s1 = document.fk.s1; var ans1 = keisan1(d1.value, d2.value); var calc1 = document.fk.calc1; calc1.value = ans1; var ans2 = keisan2(d1.value, d2.value, d3.value, d4.value, s1.value); var calc2 = document.fk.calc2; calc2 .value = ans2 ; if(ans2 >= 0) calc2.style.color = "#e60000"; if(ans2 >= 0) calc2.style.backgroundColor = "#ffffff"; if(ans2 >= 1.4) calc2.style.color = "#ffffff"; if(ans2 >= 1.4) calc2.style.backgroundColor = "#e60000"; var ans3 = keisan3(d1.value, d2.value); var calc3 = document.fk.calc3; calc3.value = ans3; if(ans3 <180) calc3.style.backgroundColor = "#D5FFCB"; if(ans3 >=180) calc3.style.backgroundColor = "#FFCC99"; if(ans3 >=270) calc3.style.backgroundColor = "#FF9999"; } //--> </SCRIPT> <FONT SIZE="5"><B>計算</B></font><BR> <FORM name="fk"> <FONT SIZE="3"> ●条件(1)：<INPUT size="7" type="text" name="d1" style="text-align:right"><BR> ●条件(2)：<INPUT size="7" type="text" name="d2" style="text-align:right"><BR> ●条件(3)：<SELECT name="s1" id="s1" onchange="b();"> <OPTION value="0.1">A</OPTION> <OPTION value="0.2">B</OPTION> </SELECT> <BR> ●条件(4)：<INPUT size="7" type="text" name="d3" style="text-align:right"><BR> ●条件(5)：<INPUT size="7" type="text" name="d4" style="text-align:right"><BR> <BR> <INPUT type="button" value="計算開始" onclick="calc()"> <BR> <BR> ◆回答(1)：<INPUT size="7" type="text" name="calc1" style="text-align:right"><BR> ◆回答(2)：<INPUT size="7" type="text" name="calc2" style="text-align:right"><BR> ◆回答(3)：<INPUT size="7" type="text" name="calc3" style="text-align:right"><BR> <BR> </FONT> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- javascriptの計算結果をweb上に表示
WEB上で入力した数値から複数の計算をさせ、それをフォームからcgiに送るjavascriprを組みたいと思っています。 【現在保有のスクリプト】 下記のスクリプト1では、text1 text2 欄に数値を入力した後、「計算」ボタンを押し、送信ボタンを押すと、計算結果をcgiに送ることが可能です。 （下記の場合は、「入力数値の和」と「積」の2つの数値の送信する) 【やりたいこと】 text1 text2 欄に数値を入力した後、「計算」ボタンを押したあとに、「和と積がブラウザ上に表示され、確認した後に「送信ボタン」を押せるようにしたい。 ということで、修正したのがスクリプト2です。 【質問事項】 スクリプト2では、スクリプト1をベースに javascript上に msg.innerHTML = msg; msg2.innerHTML = msg2; を加え、 HTML上に <p id="msg"></p> <p id="msg2"></p> を加えていますが、これでは動きません。 上記に加え function readText() { var text1 = document.getElementById(""); などのパーツを入力する必要があるはずだと思うのですが、いろいろな場所に試行錯誤しておりますが、うまくいきません。 ご教示いただきたくお願いいたします。 【スクリプト1】************************************************ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <script type="text/javascript"> <!-- //@cc_on document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt ) { var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/ var v1, v2, msg, sum, msg2, sum2; if( t.type == 'button' && t.name == 'calc' && t.form.id == 'form2' ) { v1 = t.form.elements['text1'].value; v2 = t.form.elements['text2'].value; if ( isNaN( v1 ) || v1 == '' || isNaN( v2 ) || v2 == '' ) { msg = '数字以外の文字が入ってます'; } else { sum = parseFloat( v1 ) * parseFloat( v2 ); msg = '積は、' + sum + 'です'; sum2 = parseFloat( v1 ) + parseFloat( v2 ); msg2 = '和は、' + sum2 + 'です'; } t.form.elements['plus'].value = msg; t.form.elements['plus2'].value = msg2; } }, false ); //--> </script> </head> <body> <form action="form30.cgi" method="post" name="form2" id="form2"> <fieldset> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="計算" name="calc" /> <br> <input type="hidden" name="plus" value=""> <input type="hidden" name="plus2" value=""> <input type="submit" value="送信" /> </fieldset> </form> </body> </html> **************************************************************** 【スクリプト2】上記を改造しweb上で計算結果を表示させたい******** <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <script type="text/javascript"> <!-- //@cc_on document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt ) { var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/ var v1, v2, msg, sum, msg2, sum2; if( t.type == 'button' && t.name == 'calc' && t.form.id == 'form2' ) { v1 = t.form.elements['text1'].value; v2 = t.form.elements['text2'].value; if ( isNaN( v1 ) || v1 == '' || isNaN( v2 ) || v2 == '' ) { msg = '数字以外の文字が入ってます'; } else { sum = parseFloat( v1 ) * parseFloat( v2 ); msg = '積は、' + sum + 'です'; sum2 = parseFloat( v1 ) + parseFloat( v2 ); msg2 = '和は、' + sum2 + 'です'; } t.form.elements['plus'].value = msg; t.form.elements['plus2'].value = msg2; msg.innerHTML = msg; msg2.innerHTML = msg2; } }, false ); //--> </script> </head> <body> <form action="form30.cgi" method="post" name="form2" id="form2"> <fieldset> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="計算" name="calc" /> <br> <input type="hidden" name="plus" value=""> <input type="hidden" name="plus2" value=""> <p id="msg"></p> <p id="msg2"></p> <input type="submit" value="送信" /> </fieldset> </form> </body> </html> ****************************************************************
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 なんせ、登録は50件あるときもあるそうなので大変参考になります。 ほんとにありがとうございます。 自分では、変数をたくさんつけて力技になってしまい、とてもじゃないですが他の人にはこんな自分のソースを見せれないと感じています。 ですが、みなさんのおかげで何とかなるかも・・・って感じです。 自分でも考えてみますが、なにかひらめきがございましたらまたお願いします。