• 締切済み

ボタンを押して計算結果を出したい

下記のもの、うまくいきません。 どのようにしたらよいのでしょうか? 教えてください。よろしくお願いします。 <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>

  • ki_c
  • お礼率63% (28/44)

みんなの回答

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは ><FORM METHOD=GET ACTION="/calc/calc.exe"> 別のページで計算結果を出すのですか? 同一ページでボタンを押して結果を出すのであれば <script language="JavaScript"> <!-- function calc() { Num1 = eval(document.myFORM.Num1.value); Num2 = eval(document.myFORM.Num2.value); Opr=document.myFORM.Opr.value; Ans = eval(Num1 + Opr + Num2); document.myFORM.Ans.value = Ans; } // --> </script> <PRE> 数値1 演算子 数値2 答え</PRE> <form name="myFORM"> <input type="text" name="Num1"> <SELECT NAME="Opr" SIZE=1> <OPTION value="+">+</option> <OPTION value="-">-</option> <OPTION value="*">*</option> <OPTION value="/">/</option> </SELECT> <input type="text" name="Num2"> = <input type="text" name="Ans"> <input type="button" value="計算" onClick="calc()"> </form> でいいと思います

  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.1

こうですか。 <SCRIPT language = "JavaScript"> function calc(Submit){ Num1 = Number(document.foam1.Num1.value); Num2 = Number(document.foam1.Num2.value); Ans = document.foam1. Opr.value; document.foam1.Ans.value = eval('Num1' + Ans +'Num2'); } </SCRIPT> </HEAD> <PRE> 数値1 演算子 数値2 答え</PRE> <FORM METHOD=GET ACTION="/calc/calc.exe" name="foam1"> <INPUT NAME="Num1" VALUE=""> <SELECT NAME="Opr" SIZE=1 VALUE=""> <OPTION value="+">+</OPTION> <OPTION value="-">-</OPTION> <OPTION value="*">*</OPTION> <OPTION value="/">/</OPTION> </SELECT> <INPUT NAME="Num2" VALUE=""> = <INPUT NAME="Ans" VALUE=""> <INPUT TYPE="Submit" VALUE="計算" onclick="calc()"> </FORM>

関連するQ&A

  • セレクトで選んだ数の計算方法

    初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が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()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、 どのようにしたら良いか、教えてください。 根本的に違っているようでしたら、どうやればよいのか教えてください。 よろしくお願いします

  • 自分のIEでは計算が行われません。

    昨日も質問させてもらったのですが、また困ったことが起きました。 下のHTMLをIEで表示させてみたのですが、友人の環境ではコンボボックスの数字を変えることによって計算されるのですが、私の環境では計算が行われません。 何が原因なのでしょうか? <html> <head> <title> プログラミング基礎 </title> <script language ="JavaScript"> <!-- function calc(amount){ document.mugcup.total.value = 498 * eval(amount); }//--> </script> </head> <body> <form name=mugcup> マグカップ(1個 税込498円:お一人様限定5個まで)<br> <hr> 個数: <select name ="num" onchange = "javascript:calc(this.value)"> <option value =0>0 <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 </select> 小計: <input type="text" size="8" name="total">円<br> <hr> </form> </body> </html>

  • 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="行を挿入" /> 以上、よろしくお願いします。

  • フォームを送信して選択股をそのままにしたい

    フォームを送信してそのフォームで選択した内容を フォームの下の部分に表示するようなプログラムを作りたいのですが 送信するとフォームの選択内容が戻ってしまいます。 選択を保持して表示するにはどうしたらよいですか? 路線情報の検索みたいな感じにしたいということです。 ****self.php**** <html> <head></head> <body> <form action='self.php' method=get> <select name='num' id='num'> <option name='5' value='5'>5</option> <option name='7' value='7'>7</option> </select> <br><input type=submit value='送信'> <form> <script language="javascript"> document.open(); document.write(<?php print $_GET["num"]; ?>); document.close(); </script> </body> </html>

  • 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>

  • ラジオボタンでうまくするには・・・・

    初めまして。 現在下記のプルダウン形式で、一つの価格が同じなので問題なく動くのですが <FORM action="cart/sys/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> <SELECT name=sur> <OPTION value="" selected>購入数量</OPTION> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION value=5>5</SELECT> <INPUT type=submit value=カートに入れる> </FORM><BR> <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> </FORM> 同じ商品で1・2・3・4・5のそれぞれに単価が変わる設定をしたいのですが、うまくいく方法が見つからないです。 ラジオボタン形式で作ってみたものの・・・・ <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=submit value=カートに入れる> </FORM> <FORM> <INPUT type="radio" name="name1" value="2000">1袋<BR> <INPUT type="radio" name="name1" value="3900">2袋<BR> <INPUT type="radio" name="name1" value="5800">3袋<BR> <INPUT type="radio" name="name1" value="7500">4袋<BR> <INPUT type="radio" name="name1" value="8500">5袋</FORM> としてみましたがうまくいきません。 なにか方法ございましたら、ご教授いただければと思います。

    • ベストアンサー
    • HTML
  • 複数のvalue値を返すには

    Aを選択した時10、Bを選択した時100、Cなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、 Aの時10と20を、Bの時100と200、Cの時1000と2000が もうひとつの<input type="text" name="TEXT2" value="">に表示できるようにするにはどうしたらよいのでしょうか。 記述方法を教えていただければ一番いいのですが、サンプルがあるページでもいいので、教えてください。 <script type="text/javascript"> <!-- function kai(){ document.FORM.TEXT.value = document.FORM.num.value; } //--> </script> </head> <body> <form name="FORM"> <input type="text" name="TEXT" value=""> <select name="num" onChange="kai()"> <option value="10">A</option> <option value="100">B</option> <option value="1000">C</option> </select> </form>

  • 計算結果のテキスト表示

    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初心者です) どこに問題があるのか、指摘してくださる方を探しています。 極めて初歩的なところで誤っているのだろうと思いますので 質問するのも恐縮なのですが・・・ どなたかよろしくお願いいたします。 ------------------------------------------ <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>

  • form nameをform actionにしたいんですが・・・

    <html> <head> <title> 商品確認 </title> <script language ="JavaScript"> <!-- function calc(amount){ document.ball.total.value = 4095 * eval(amount); }//--> </script> </head> <body> <form name=ball method="post"> //←ここをform action="x.php"にしたい。 V4SLBL ソフトタッチ鈴入り4号球<br> <hr> 個数: <select name ="num" onchange = "javascript:calc(this.value)"> <option value =0>0 <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 </select> 小計: <input type="text" size="8" name="total">円<br> <hr> </form> </body> </html> 上の場所をaction="x.php"にしてx.phpに小計を送ろうとしています。 しかし、actionにすると小計が表示されなくなります。 いろいろ考えましたが全く答えが出てきません。 アドバイスよろしくお願いします。

専門家に質問してみよう