- ベストアンサー
計算結果のテキスト表示
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>
- tamurad007
- お礼率10% (21/192)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
回答#1さんと同様、やりたいことが今ひとつ分からなかったのですが、こういうことでしょうか？ <HTML> <HEAD> <SCRIPT language="javascript"> <!-- function calc() { with(document.f) { var syoukei = goods1.value * goods2.value * (goods3.value * 0.01); syoukei = Math.round(syoukei); document.getElementById("syoukei").innerHTML = syoukei; } } // --> </SCRIPT> </HEAD> <BODY> <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 <span id="syoukei"></span>袋<BR> </FORM> </BODY> </HTML> 違っていれば、また補足等をして下さい。
その他の回答 (1)
- JavaJavax2
- ベストアンサー率22% (68/305)
意味わかんなかったけどこういう事？ <SCRIPT language="javascript"> <!-- function calc() { with(document.f) { document.getElementById("abc").innerHTML = Math.round( goods1.value * goods2.value * (goods3.value * 0.01)) } } // --> </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> </FORM> <div id="abc"></div>
関連するQ&A
- 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
- ボタンを押して計算結果を出したい
下記のもの、うまくいきません。 どのようにしたらよいのでしょうか？ 教えてください。よろしくお願いします。 <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
- ラジオボタンを押して計算結果を出した後、全てをｎｕｌｌ値に戻すには？
初心者ながらがんばっています。どうか宜しくお願いします。 <HTML> <head> <script language="JavaScript"> <!-- function calc(radio, form) { form.OUT.value = form.IN.value * radio.value; } //--> </script> </head> というスクリプト内容で、 計算する数値:<input type=TEXT name="IN" size=10 value=0> <input type=RADIO name="MODE" value="3.14" onClick="calc(this,this.form)"> cm 計算結果:<input type=TEXT name="OUT" size=10 value=0 style="text-align:right"> cm このラジオボタンをクリアして、計算する数値と計算結果の場所をブランクにするには、どのように組めば良いのでしょう。onclickを使うことは解るのですが、どんなふうに組んでも、うまく動作しません。
- ベストアンサー
- 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
- 同じ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>
- ベストアンサー
- JavaScript
- フォームの表示が消えてしまう・・・
初歩的なことでつまづいております。 フォームを利用して「入力」フォームに文字を入れ、「入力！」ボタンを押すと「結果」フォームにその文字を表示させたいのですがうまくいきません。 やりたいことは、 １．「入力」フォームに文字を入れます（たとえば"123"） ２．「入力！」ボタンを押します ３．すると「結果」フォームに"123"と表示させたいです ４．また、「入力」フォームにはそのまま"123"が表示されたままにしたいです なぜか下記の記述だとボタンを押した瞬間にすべてのフォームの文字表示が消えてしまいます。 これはどうしてなのでしょうか？すみませんがよろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"><!-- function calcButton() { var inputValue = document.calc.input.value; document.calc.result.value = inputValue; } //--></SCRIPT> </HEAD> <BODY> <FORM name="calc" action=""> 入力<INPUT type="text" size="5" name="input"><BR> 結果<INPUT type="text" size="5" name="result"><BR> <INPUT type="submit" value="入力！" onClick="calcButton()"> </FORM> </BODY></HTML>
- ベストアンサー
- 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
- 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）
複数の計算式があります。 それぞれ、ホームページで数値を入れていって、最後に計算ボタンを押すと、計算した値が一気に出るようにしたいです。 CGIではなく、HTMLの中にJavaScriptを埋め込んで作りたいと思っています。 スクリプトの意味はよくわからないまま、とりあえず以下のソースを埋め込んでみました。 HEAD部分に <SCRIPT LANGUAGE="JavaScript"> function calc(f){ f.z.value=eval(f.x.value)+eval(f.y.value); } </SCRIPT> BODY部分に <FORM NAME="form1"> <INPUT TYPE="text" SIZE=10 NAME="x">+ <INPUT TYPE="text" SIZE=10 NAME="y">= <INPUT TYPE="text" SIZE=10 NAME="z"><BR> <INPUT TYPE="button" VALUE="計算" onClick="calc(this.form)"><BR> </FORM> これは動きました。 でも、計算式が一つだけです。複数の式を計算させたいのですが……。 同じ感じでコピーしてxyzの文字をかえたりと幼稚な試行錯誤をしてみましたが動きませんでした。 二つ以上の計算式を埋め込むには、どんなスクリプトにすればいいのでしょうか。 たとえば、 「別の空欄に入れたaという値とbという値をかけて、先ほどのxという値を2倍したものを引き、さらに100を足す」 という計算式を追加して、でも「計算」ボタンは一個のままで済ませるには、どうすればいいでしょうか。 もしできれば、全体のスクリプトをお教えいただけるととてもありがたいです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- テキストボックスの値で配列の値を求めるには?
やりたいと思っているのは、 (1) "INPUT" の値を入力。 (2) "koteichi" は他からの参照値。 (3) "goukei"に(1)と(2)の合計値。 (4) "total" に(3)の値に該当する配列の値。 (実際には配列の値を代入した式の答え。) という流れになります。 (3)まではなんとか分かるのですが、 (4)はどのように配列の値を代入すればいいのかが 分かりません。 なにぶん最近始めた初心者なので不規則な値は配列を使えばいいと解釈したのですが、まったく使い方を間違えているのでしょうか? こういった場合は別のやり方があるのでしょうか? どなたかよろしくお願いします。 <SCRIPT language=JavaScript1.1> <!-- rank = new Array(6); rank[0]=0; rank[1]=5;[rank2]=8;[rank3]=12;rank[4]=16;rank[5]=22; function calc(){ document.myform.goukei.innerText = eval(document.myform.INPUT.value) +eval(document.myform.koteichi.value); } // --> </SCRIPT> </HEAD> <BODY> <form name="myform"> <INPUT size="20" type="text" name="INPUT" value="0" onchange="calc()"/>+<INPUT size="20" type="text" name="koteichi" value="10">=<INPUT size="20" type="text" name="goukei" value="0"> <INPUT size="20" type="text" name="total" value="0"> </FORM> </BODY>
- ベストアンサー
- JavaScript
