- ベストアンサー
電卓のJavaScript
初心者で申し訳ないのですが、電卓のソースを作ってみたのですが、JavaScriptが間違っているためか「ページにエラーが発生しました」となり計算が行われません。 どのように、改変すればいいのでしょうか？どうかご教授お願いします。 <html> <head> <title> 電卓 </title> <script language = "JavaScript"> count = 0; sum= 0; flag =0; list = new Array( "0", "0","0","0","0",); function clist( ) { for( i = 0 ; i < 5 ; i++ ) { list[i] =0; } } function calc1() { num = sum; clist( ); display.value = num; flag = 1; } function calc2() { num = sum; clist( ); display.value = num; flag = 2; } function calc3() { num = sum; clist( ); display.value = num; flag = 3; } function calc4() { num = sum; clist( ); display.value = num; flag = 4; } function calc5() { clist( ); } function equal() { if(flag==1) { sum=num+sum; display.value=sum; clist( ); } else if(flag==2) { sum=num-sum; display.value=sum; clist( ); } else if(flag==3) { sum=num*sum; display.value=sum; clist( ); } else if(flag==4) { sum=num/sum; display.value=sum; clist( ); } } function push0( ) { list[count] = 0; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+ =list[i]*temp; } count+=1; display.value=sum; } function push1( ) { list[count] = 1; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+ =list[i]*temp; } count+=1; display.value=sum; } 同様に２～９ </script> </head> <body> <hr><br> <input type = "button" value ="7" onclick = "push7()">  <input type = "button" value ="8" onclick = "push8()">  <input type = "button" value ="9" onclick = "push9()">   <input type = "button" value ="+" onclick = "calc1()"> <br><br> <input type = "button" value ="4" onclick = "push4()">  <input type = "button" value ="5" onclick = "push5()">  <input type = "button" value ="6" onclick = "push6()">   <input type = "button" value ="-" onclick = "calc2()"> <br><br> <input type = "button" value ="1" onclick = "push1()">  <input type = "button" value ="2" onclick = "push2()">  <input type = "button" value ="3" onclick = "push3()">   <input type = "button" value ="×" onclick = "calc3()"> <br><br> <input type = "button" value ="0" onclick = "push0()">  <input type = "button" value ="=" onclick = "equal()">  <input type = "button" value ="C" onclick = "calc5()">   <input type = "button" value ="÷" onclick = "calc4()"> <br><br> <br><br><hr><br>    <input type = "text" size ="10" name = "display">  <br><br><hr><br> </body> </html>
- rinnshan
- お礼率65% (127/194)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 長くなりそうなのでサンプルコードは他の方同様に試してはないですが 電卓を創ってるのならこんな感じかな～？ 複雑な計算は試してないけどとりあえず計算できてると思う・・・ <script language="javascript"> <!-- function push(n) { num = document.getElementById("display").value; if(num == "0") num = ""; num0 = num + n; document.getElementById("display").value = num0; } function pushs(n) { num = document.getElementById("display").value; num1 = document.getElementById("pre").value; if (num == "" && num1 == "" || num == "0") return false; else document.getElementById("display").value = num + n; } function calc(n) { if(document.getElementById("display").value == "") return false; document.getElementById("pre").value = document.getElementById("display").value; document.getElementById("pre1").value = ""; document.getElementById("sisoku").value = n; document.getElementById("display").value = ""; } function equal() { if(document.getElementById("sisoku").value == "/" && document.getElementById("display").value == "0") {return false;} if(document.getElementById("pre1").value == "" ) { document.getElementById("pre1").value = document.getElementById("display").value;} else { document.getElementById("pre").value = document.getElementById("display").value; } if(document.getElementById("pre").value == "") return false; if(document.getElementById("pre1").value == "") return false; i = eval(document.getElementById("pre").value); j = eval(document.getElementById("pre1").value); k = document.getElementById("sisoku").value; n = eval(i + k + j); document.getElementById("display").value = ""; document.getElementById("display").value = n; } function cl() { document.getElementById("display").value = ""; document.getElementById("pre").value = ""; document.getElementById("pre1").value = ""; document.getElementById("sisoku").value = ""; } //--> </script> <style type="text/css"> div { width:150px; text-align:center; background-color:gray; } .input { width:25px; } </style> </head> <body> <div> <hr><br> <input type = "button" value ="7" class="input" onclick = "push(7)"> <input type = "button" value ="8" class="input" onclick = "push(8)"> <input type = "button" value ="9" class="input" onclick = "push(9)"> <input type = "button" value ="+" class="input" onclick = "calc(this.value)"> <br><br> <input type = "button" value ="4" class="input" onclick = "push(4)"> <input type = "button" value ="5" class="input" onclick = "push(5)"> <input type = "button" value ="6" class="input" onclick = "push(6)"> <input type = "button" value ="-" class="input" onclick = "calc(this.value)"> <br><br> <input type = "button" value ="1" class="input" onclick = "push(1)"> <input type = "button" value ="2" class="input" onclick = "push(2)"> <input type = "button" value ="3" class="input" onclick = "push(3)"> <input type = "button" value ="*" class="input" onclick = "calc(this.value)"> <br><br> <input type = "button" value ="0" class="input" onclick = "pushs(0)"> <input type = "button" value ="=" class="input" onclick = "equal()"> <input type = "button" value ="C" class="input" onclick = "cl()"> <input type = "button" value ="/" class="input" onclick = "calc(this.value)"> <br><br> <hr> <input type="hidden" id="pre"> <input type="hidden" id="sisoku"> <input type="hidden" id="pre1"> <input type="text" style="width:100px" id="display"> <br><hr> </div> あと文字盤の配列に小数点がなかったので無視しましたけど（『C』はクリアボタンですよね？）つけるのであれば function pushc(n) { num = document.getElementById("display").value; if (num.match(/\./))return false; if(num == "") {num = 0; } num0 = num + n; document.getElementById("display").value = num0; } <input type="button" value="." class="input" onClick="pushc(this.value)"> を新規に付け加えて function equal(n) { } 内の n = eval(i + k + j);の後ろに n = Math.round(n*1000000)/1000000; を付け加えてください（小数第6位まで表示します）
その他の回答 (4)
- yambejp
- ベストアンサー率51% (3827/7415)
＃１です 文法ミスと、指摘を反映させたソースです。 めんどうなので細かくは検証していませんが、とりあえず、０と１と 四則演算は動いているみたいですね。 それとあくまでも元ソースをいかしたものですので、基本的には 手をいれてません。そもそも私ならこんな書き方をしませんので・・・ まぁ初心者ということでがんばってください。 <html> <head> <title> 電卓 </title> <script language = "JavaScript"> window.onload=function(){ display=document.getElementById('display'); } count = 0; sum= 0; flag =0; list = new Array( "0", "0","0","0","0"); function clist( ) { for( i = 0 ; i < 5 ; i++ ) { list[i] =0; } } function calc1() { num = sum; clist( ); display.value = num; flag = 1; } function calc2() { num = sum; clist( ); display.value = num; flag = 2; } function calc3() { num = sum; clist( ); display.value = num; flag = 3; } function calc4() { num = sum; clist( ); display.value = num; flag = 4; } function calc5() { clist( ); } function equal() { if(flag==1) { sum=num+sum; display.value=sum; clist( ); } else if(flag==2) { sum=num-sum; display.value=sum; clist( ); } else if(flag==3) { sum=num*sum; display.value=sum; clist( ); } else if(flag==4) { sum=num/sum; display.value=sum; clist( ); } } function push0( ) { list[count] = 0; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+=list[i]*temp; } count+=1; display.value=sum; } function push1( ) { list[count] = 1; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+=list[i]*temp; } count+=1; display.value=sum; } //同様に２～９ </script> </head> <body> <hr><br> <input type = "button" value ="7" onclick = "push7()">  <input type = "button" value ="8" onclick = "push8()">  <input type = "button" value ="9" onclick = "push9()">   <input type = "button" value ="+" onclick = "calc1()"> <br><br> <input type = "button" value ="4" onclick = "push4()">  <input type = "button" value ="5" onclick = "push5()">  <input type = "button" value ="6" onclick = "push6()">   <input type = "button" value ="-" onclick = "calc2()"> <br><br> <input type = "button" value ="1" onclick = "push1()">  <input type = "button" value ="2" onclick = "push2()">  <input type = "button" value ="3" onclick = "push3()">   <input type = "button" value ="×" onclick = "calc3()"> <br><br> <input type = "button" value ="0" onclick = "push0()">  <input type = "button" value ="=" onclick = "equal()">  <input type = "button" value ="C" onclick = "calc5()">   <input type = "button" value ="÷" onclick = "calc4()"> <br><br> <br><br><hr><br>    <input type = "text" size ="10" name = "display" id="display">  <br><br><hr><br> </body> </html>
- himajin100000
- ベストアンサー率54% (1660/3060)
ん、#2のコードだとまだ不完全っぽい 6*= 6/= とかしょっぱな打つと0とかInfinityが表示される 正しくは両方とも6が表示されること。 明日ちょっと考えてみよう。今日は眠い。
- himajin100000
- ベストアンサー率54% (1660/3060)
Q3120678-2.html ================================================ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>テスト</title> <style type="text/css"> dt,dd{ height:2ex; } </style> <script type="text/javascript" src="Q3120678-2.js"></script> </head> <body onload="init();"> <h1>電卓</h1> <p>元のソースが冗長で直しようがないくらい酷かったので何だかよくわからなかったので参考にせずに作り直してみた。</p> <p>Minefield/Firefox 3.0a6preとOpera9.21で動作確認済み</p> <table> <caption>電卓のキー</caption> <tbody> <tr> <td><input type="button" value="7" onclick="stack(this.value);" /></td> <td><input type="button" value="8" onclick="stack(this.value);" /></td> <td><input type="button" value="9" onclick="stack(this.value);" /></td> <td><input type="button" value="+" onclick="switchIndex(this.value);"/></td> </tr> <tr> <td><input type="button" value="4" onclick="stack(this.value);" /></td> <td><input type="button" value="5" onclick="stack(this.value);" /></td> <td><input type="button" value="6" onclick="stack(this.value);" /></td> <td><input type="button" value="-" onclick="switchIndex(this.value);" /></td> </tr> <tr> <td><input type="button" value="3" onclick="stack(this.value);" /></td> <td><input type="button" value="2" onclick="stack(this.value);" /></td> <td><input type="button" value="1" onclick="stack(this.value);" /></td> <td><input type="button" value="*" onclick="switchIndex(this.value);" /></td> </tr> <tr> <td><input type="button" value="0" onclick="stack(this.value);" /></td> <td><input type="button" value="=" onclick="switchIndex(this.value);"/></td> <td><input type="button" value="C" onclick="clean();" /></td> <td><input type="button" value="/" onclick="switchIndex(this.value);" /></td> </tr> </tbody> </table> <dl> <dt>式(ただし乗除が優先されない)</dt> <dd id="formula"> </dd> <dt>答え</dt> <dd id="answer"> </dd> </dl> </body> </html> ========================================== Q3120678-2.js ========================================= var operand; var TargetOperandIndex; var OperationIndex = "+"; var Answer; var Formula; var equalafter = true; /* 全てのtextContentをinnerTextに書き換えたらIE 7でも動作する。*/ function init(){ operand = new Array(2); Answer = document.getElementById("answer"); Formula = document.getElementById("formula"); equalafter = 0; clean(); }; function clean(){ operand[0] = 0; operand[1] = 0; result = 0; TargetOperandIndex = 0; OperationIndex = 0; Answer.textContent = ""; Formula.textContent = ""; equalafter = false; }; function stack(num){ if(equalafter == true){ clean(); } operand[TargetOperandIndex] = 10 * operand[TargetOperandIndex] + parseInt(num); Formula.textContent = Formula.textContent + num; Answer.textContent = operand[TargetOperandIndex]; }; function switchIndex(Index){ Formula.textContent = Formula.textContent + Index; TargetOperandIndex = TargetOperandIndex + 1; if (TargetOperandIndex == 2||Index == "="){ operand[0] = operation(); operand[1] = 0; Answer.textContent = operand[0]; TargetOperandIndex = 1; } if (Index == "="){ equalafter = true; } else { equalafter = false; } OperationIndex = Index; }; function operation(){ switch (OperationIndex) { case "+": return operand[0] + operand[1]; break; case "-": return operand[0] - operand[1]; break; case "*": return operand[0] * operand[1]; break; case "/": return operand[0] / operand[1]; break; case "=": return operand[0]; break; } };
お礼
これはすごいです(・_・; しかし、私はプログラミングの基礎しかかじっていないので、 できるだけ文型を変えてほしくはなかったです。 しかも、答えのコンボボックスがなかったのですが、どういうこと でしょうか？
- yambejp
- ベストアンサー率51% (3827/7415)
あきらかな文法ミスは２点。 ×list = new Array( "0", "0","0","0","0",); ○list = new Array( "0", "0","0","0","0"); ×sum+ =list[i]*temp; ○sum +=list[i]*temp; ※これは２箇所ありますね。 それと、 display.value=sum; とあるのですが、displayを<input type = "text" size ="10" name = "display"> と認識させるのはきびしいですね。 せめて <input type = "text" size ="10" name = "display" id="display"> として、 document.getElementById('display').value=sum; としてください
お礼
ご回答ありがとうございました。 list = new Array( "0", "0","0","0","0");とsum +=list[i]*temp;と ついでにcount+=1;もcount +=1;に改変しました。 しかし、やはり「ページにエラーが発生しました」となってしまいますね(^_^; <input type = "text" size ="10" name = "display" id="display"> として、document.getElementById('display').value=sum;とするのが よくわからないのですが・・どういうことでしょうね？
お礼
う～ん、何のことを言っているのでしょうかね？ 初心者ですみませんm(_ _)m