- 締切済み
switchを使って四則演算のプログラムを作りました。
switchを使って四則演算のプログラムを作りました。 以下プログラム <html> <head> <title>kadai05</title> <script type=text/javascript> function Calc(n) { a = parseInt(document.f.a.value); b = parseInt(document.f.b.value); switch (n) { case 1 : Ans = a + b; break; case 2 : Ans = a - b; break; case 3 : Ans = a * b; break; case 4 : Ans = a / b; break; } document.f.c.value = Ans; } </script> </head> <body> <center> <h3>四則演算</h3> <form name = "f"> <input name="a" size="8"> ☆ <input name="b" size="8"> = <input type="text" name="c" size="10"> <p> <input type="button" value="＋" onclick="Calc(1)"> <input type="button" value="－ "onclick="Calc(2)"> <input type="button" value="×" onclick="Calc(3)"> <input type="button" value="÷ "onclick="Calc(4)"> </form> </center> </body> </html> これは問題集の問題なのですが、答えを見ると b = parseInt(document.f.b.value)とswitch (n) { の間に Ans = 0;が入っています。 これはなぜ入れているのか解説がありません。 特になくても困らないと思うのですが、なぜ入れているのでしょうか？ 入れないことでどんな不具合が起きる可能性があるのでしょうか？ 教えて下さい。 お願い致します。
- makiko3300
- お礼率4% (2/48)
- JavaScript
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- think49
- ベストアンサー率59% (285/482)
#2です。 > TypeError: Cannot read property 'a' of undefined 読み直してみて「何かおかしい」と思ったら、<form> が書かれていないためのエラーでした…。ごめんなさい。 以下のように <form> を入れた場合、 ----- <form name = "f"> <input name="a" size="8"> ☆ <input name="b" size="8"> = <input type="text" name="c" size="10"> <p> <input type="button" value="＋" onclick="Calc(1)"> <input type="button" value="－ "onclick="Calc(2)"> <input type="button" value="×" onclick="Calc(3)"> <input type="button" value="÷ "onclick="Calc(4)"> </form> <script type="text/javascript"><!-- function Calc(n) { a = parseInt(document.f.a.value); b = parseInt(document.f.b.value); switch (n) { case 1 : Ans = a + b; break; case 2 : Ans = a - b; break; case 3 : Ans = a * b; break; case 4 : Ans = a / b; break; } document.f.c.value = Ans; } Calc(5); //--></script> ----- 「Uncaught ReferenceError: Ans is not defined」のエラーが返ってきます。(GoogleChrome4.1で確認) エラーが返ってくる理由は #2 で述べた理由と同じなので、割愛します。
- think49
- ベストアンサー率59% (285/482)
> 入れないことでどんな不具合が起きる可能性があるのでしょうか？ 不具合が起きる可能性が一つあります。 ---- function Calc(n) { a = parseInt(document.f.a.value); b = parseInt(document.f.b.value); switch (n) { case 1 : Ans = a + b; break; case 2 : Ans = a - b; break; case 3 : Ans = a * b; break; case 4 : Ans = a / b; break; } document.f.c.value = Ans; } Calc(5); ---- このコードを実行すると、 TypeError: Cannot read property 'a' of undefined のエラーが返ってきます。 Switch文は nの値が 1,2,3,4 のいずれの値である場合にだけ動作するので、変数Ansが初期化されていないのです。 先に、Ans = 0; のように初期化しておけばこの問題は防げます。 「引数にどんな値が来るのか？」「意図しない値が来たときにはどういう挙動にするのか？」 そういった事を考えておくと、安全なコードが出来ます。 しかしながら、もしもっと良いコードを書きたいと思えば、グローバル変数を使わない方が良いです。 var Ans = 0; のように var を先頭に入れる事で関数内でだけ有効な変数が作れます。 ローカル変数は関数の実行が終了すると同時に解放されます。
- 0909union
- ベストアンサー率39% (325/818)
＞特になくても困らないと思うのですが、なぜ入れているのでしょうか？ たぶん学習途中なので、そう思うかもしれません。基本的に自動で変数が初期化されて、どんな値でもはいるようになっています。 これは、実はプロのプログラマー的(C, C++, javaなど)には、「そんなもの怖くて使えない」と言う事になります。なぜか？ 自動 ＝ オート変数 ＝ 設定されていた値が保障されない となります。実際、業務用ソフトではオート変数はほとんど使われません。私も、そのような実例を見ていて、本来”０”が入っているはずが、”１”が入る時がある？ 突き止めたら、リソースなどなくなり、メモリーを確保、リリースを繰り返してゆくと、オート変数として宣言されていたため、犯されていた可能性がある、と言う事で、３０００万円以上の代償を払った経験があります。 JavaScriptも例外ではありません。この程度の長さでは、ほとんど見られませんが、ユーザー定義の関数や、クラスが１０、５０、１００以上になると、同じ名前の変数が結構使われます。 そうすると、意図しない値が変数を初期化していないために、入っていて誤動作を起こします。 例として for(a=1; a>10; a++){ とした場合、動作しますが、他のところで同じループをかくと、あれ？ ループが１回も実行されない。なんて事があります。そうならないためには for(var a=1; a>10; a++){ なぜ？ と思わないで、安全のために、誤動作をさせないようにするために、おまじないと思ってください。 これは５００行以上の物を作ればわかります。
関連する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
- 超初心者です。buttonをselectに変えるには？
<SCRIPT language="JavaScript"> function calc1(){document.keisan.Z.value=eval(document.keisan.X.value)*1;} function calc2(){document.keisan.Z.value=eval(document.keisan.X.value)*2;} function calc3(){document.keisan.Z.value=eval(document.keisan.X.value)*3;} </SCRIPT> </head> <FORM name="keisan" > <INPUT type="text" name="X" size="4"> <INPUT type="text" name="Z" size="6"> <INPUT type="button" value="1" onClick="calc1()"> <INPUT type="button" value="2" onClick="calc2()"> <INPUT type="button" value="3" onClick="calc3()"> <INPUT type="reset" value="やりなおし"> </FORM> これの INPUT type="button"を<select>～<select> に変えたいと思っています。 自分の頭ではいろいろやってもうまくいきませんでした。 どなたか御教授を宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptで電卓を作成
プログラミングをまったくやったことがない状態から、ドットインストールやテックアカデミーのHTML,CSS,Javascriptの入門動画をすべて見終わった段階ですので、 基本的な仕組みと関数やfor文、if文、while文、などについてくらいは理解しています。 今回、javascriptを使って電卓のシステムを組む、という課題があり、 ネットで検索してやってみてはいるのですが行き詰っています。 最初は以下のような形で作成をしていました。 <body> <form name="myform"> <table border="1"> <tr> <td colspan="4"> <input type="text" name="result" value="" id="result"> </td> </tr> <tr> <td><input type="button" value=" "onclick="calc(' ')" ></td> <td><input type="button" value="％"onclick="calc('%')"></td> <td colspan="2"> <input type="button" value="AC" onclick="calc('AC')"></td> </tr> <tr> <td><input type="button" value="７" onclick="calc('７')"></td> <td><input type="button" value="８" onclick="calc('８')"></td> <td><input type="button" value="９" onclick="calc('９')"></td> <td><input type="button" value="÷" onclick="calc('÷')"></td> </tr> <tr> <td><input type="button" value="４"onclick="calc('４')" ></td> <td><input type="button" value="５"onclick="calc('５')" ></td> <td><input type="button" value="６"onclick="calc('６')"></td> <td><input type="button" value="×" onclick="calc('×')"></td> </tr> <tr> <td><input type="button" value="１" onclick="calc('１')" ></td> <td><input type="button" value="２" onclick="calc('２')"></td> <td><input type="button" value="３" onclick="calc('３')"></td> <td><input type="button" value="－" onclick="calc('－')"></td> </tr> <tr> <td><input type="button" value="０" onclick="calc('０')" ></td> <td><input type="button" value="＋" onclick="calc('＋')"></td> <td colspan="2"> <input type="button" value="＝" onclick="calc('＝')"></td> </tr> </form> <script> function calc(a) { if (a === "=") { document.myform.kekka.value = eval(document.myform.kekka.value); } else if (a === "AC") { document.myform.kekka.value = ""; } else { document.myform.kekka.value += a; } </script> </body> </html> ですが、onclickとevalを使わず、代わりに「addEventListner」を用いるよう指示されました。 「addEventListner」に関しては、検索してなんとかざっと理解したのですが、それ以前に、電卓の基本的な関数の組み方を理解していないため、いまいちどこから手をつけたらいいかわかりません。 いろんなサイトを見ているといろんなやり方がでてきますが、ope=+,やflag=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
- フォームに入力された値を計算する方法
私はまったくの初心者なのですがどなたか教えて下さい。 ●Ａ，Ｂ，Ｃという3つの入力フォームがあるとします。 Ａのフォームに入力された数字は「Ａ÷20」という値に、 Ｂのフォームに入力された数字はそのまま、 Ｃのフォームに入力された数字は「Ｃ×10」という値に変更して、 (Ａ+Ｃ)÷Ｂ×30という計算を行なって、その答えを Ｄのフォームへ表示するというシステムをcgiやphpで作りたいのです。 あれこれと試行錯誤しながら、javascriptでなんとか出来たんですが… どなたか教えて頂けませんか？ function keiri() { a = document.takeko.case.value; a = eval(a); a = a / 20 b = document.takeko.time.value; b = eval(b); c = document.takeko.days.value; c = eval(c); c = c * 10 ans = (a + c) / c * 30; document.spec.result.value = ans; } <form name="takeko"> <input name="case" type="text" size="12"> <input name="time" type="text" size="12"> <input name="days" type="text" size="12"> <input name="button" type="button" onClick="keiri()" value="CLICK"> <input name="result" type="text" size="12"> <br></form>
- 締切済み
- PHP
- 小数点
いつも参考にさせて頂いています。 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
- 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をすっきりした形で書くのは、どうしたらいいでしょうか？ 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0～4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------
- ベストアンサー
- 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
- 電卓をつくったのですが
<script type="text/javascript"> <!-- var to=0; var inp=""; var cal="+"; var flg=1; function df(a){ flg=0; inp+=a; document.ad1.z.value= inp; } function df1(a){ if(flg==0){ flg=1; var don=to+cal+inp; to=eval(don); inp=""; document.ad1.z.value=to; } if(a=="="){ to=0; cal="+"; }else{ cal=a; } } function df3(){ to=0; cal="+"; inp=""; document.ad1.z.value=to; } --> </script> </head> <body> <div id="s1"> <div id="s2"> <form name="ad1"> <table> <tr><td colspan="4">電卓</td></tr> <tr><td colspan="3"><input type="text" size="12px" name="z" value="0"></td> <tr> <td><input type="button" name="ad7" value="7" onClick="df(7)"></td> <td><input type="button" name="ad8" value="8" onClick="df(8)"></td> <td><input type="button" name="ad9" value="9" onClick="df(9)"></td> </tr> <tr> <td><input type="button" name="ad6" value="6" onClick="df(6)"></td> <td><input type="button" name="ad5" value="5" onClick="df(5)"></td> <td><input type="button" name="ad4" value="4" onClick="df(4)"></td> </tr> <tr> <td><input type="button" name="ad3" value="3" onClick="df(3)"></td> <td><input type="button" name="ad2" value="2" onClick="df(2)"></td> <td><input type="button" name="ad11" value="1" onClick="df(1)"></td> </tr> <tr> <td><input type="button" name="add1" value="+" onClick="df1(+)"></td> <td><input type="button" name="add2" value="-" onClick="df1(-)"></td> <td><input type="button" name="add3" value="×" onClick="df1(*)"></td> </tr> <tr> <td><input type="button" name="add4" value="÷" onClick="df1(/)"></td> <td><input type="button" name="add5" value="=" onClick="df1(=)"></td> <td><input type="button" name="add6" value="." onClick="df1(.)"></td> <td><input type="button" name="add7" value="c" onClick="df3()"></td> </tr> </table> </form> </div> </div> </body> </html> クリアーは上手くいったんですが 計算ができませんでした。 どこがいけないのでしょうか？
- ベストアンサー
- JavaScript
