• 締切済み

簡易電卓のつくり方

.  タグを用いて,以下のような整数四則演算用プログラムをつくっています。  ページを読み込むと文字列入力ダイアログ( prompt('') )が表示され,そこに入力された式を計算して,結果を警告ダイアログ( alert('') )で表示し,そしてページを読み込んだ時の処理に戻す。  どなたか方法の分かる方お願いします! ※ 参考: <input type=text id=hta><input type=button onclick=hta.value=eval(hta.value)>

noname#84497
noname#84497

みんなの回答

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.2

> 式入力から結果出力まで具体的 作れと言うわけ? それをやるのはあなたでしょ。 promptに入力されたデータの取得はJavaScriptのリファレンスを見ればいいわね。 計算はそうね、eval関数を使うのが手っ取り早いんじゃないかしら。 あとは結果を出力するだけね。 入力内容に問題がある場合の処理を考慮しなければ ほんの数行で終わるわ。

  • tasoh
  • ベストアンサー率45% (19/42)
回答No.1

これで理想に叶うかわからないですが ページロード時に呼び出される関数を作ってそこに処理を書き込めばできるかと。 んで結果出力後にリロード 参考↓ ロード時に関数を呼ぶ:<body onLoad="関数名"> リロード:location.reload(); ただし永久ループに入らないよう気をつけてw

noname#84497
質問者

補足

投稿ありがとうございます。できれば式入力から結果出力まで具体的にお願いします。

関連するQ&A

  • JavaScriptで電卓を作って一応完成はした

    のですが、分からないコードがあります。以下のコードです。 ~HTML~ <form name="dentaku"> <input type="text" name="line" value="0"> <input type="button" value="C" onclick="cl()"> <input type="button" value=" 7 " onclick="val(7)"> <input type="button" value=" 8 " onclick="val(8)"> <input type="button" value=" 9 " onclick="val(9)"> <input type="button" value="÷" onclick="keisan('/')"> <input type="button" value=" 4 " onclick="val(4)"> <input type="button" value=" 5 " onclick="val(5)"> <input type="button" value=" 6 " onclick="val(6)"> <input type="button" value="×" onclick="keisan('*')"> <input type="button" value=" 1 " onclick="val(1)"> <input type="button" value=" 2 " onclick="val(2)"> <input type="button" value=" 3 " onclick="val(3)"> <input type="button" value="-" onclick="keisan('-')"> <input type="button" value=" 0 " onclick="val(0)"> <input type="button" value=" ・ " onclick="val('.')"> <input type="button" value=" + " onclick="keisan('+')"> <input type="button" value="=" onclick="keisan('=')"> </form> ~JavaScript~ total = 0; input = ""; ope = "+"; flg = 1; function val(data) { flg = 0; input += data; document.dentaku.line.value = input; } function keisan(data) { if (flg == 0) { flg = 1; cf = total + ope + input; total = eval(cf); input = ""; document.dentaku.line.value = total; } if (data == "=") { total = 0; ope = "+"; } else { ope = data; } } function cl() { total = 0; ope = "+"; input = ""; document.dentaku.line.value = total; } 関係のないコードは省略してあります。また、CSSも省略しますが、テーブル要素を使わず以下の画像のようにインライン要素(input要素)の性質を利用して回り込みをさせています。 長くなりましたが、そこで質問なのですが、 (1)変数ope(operandの略)なのですが、初期値は+なのに演算子ボタン(上記のHTMLコード)をクリックすると、なぜ値がその演算子に変わるのか理由を教えて下さい。 何となく理由は分かりますが、はっきりと理解したいです。 (2)上記のHTMLコードをもっと簡単に書けませんか? 特にonclickをボタンの数だけ書くのは手間です。

  • 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="7" onclick="calc('7')"></td> <td><input type="button" value="8" onclick="calc('8')"></td> <td><input type="button" value="9" onclick="calc('9')"></td> <td><input type="button" value="÷" onclick="calc('÷')"></td> </tr> <tr> <td><input type="button" value="4"onclick="calc('4')" ></td> <td><input type="button" value="5"onclick="calc('5')" ></td> <td><input type="button" value="6"onclick="calc('6')"></td> <td><input type="button" value="×" onclick="calc('×')"></td> </tr>   <tr> <td><input type="button" value="1" onclick="calc('1')" ></td> <td><input type="button" value="2" onclick="calc('2')"></td> <td><input type="button" value="3" onclick="calc('3')"></td> <td><input type="button" value="-" onclick="calc('-')"></td> </tr> <tr> <td><input type="button" value="0" onclick="calc('0')" ></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などの表記をよく見かけます。が、この意味もいまいちわかっていません。。 初心者すぎるので、何かアドバイスをいただけますと幸いです。 宜しくお願いいたします。 また、このような初心者が使いこなせるようになるために向いている動画や書籍、ページがありましたら教えていただけますと助かります。

  • 電卓をつくったのですが

    <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

    初心者で申し訳ないのですが、電卓のソースを作ってみたのですが、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; } 同様に2~9 </script> </head> <body> <hr><br> <input type = "button" value ="7" onclick = "push7()">&nbsp <input type = "button" value ="8" onclick = "push8()">&nbsp <input type = "button" value ="9" onclick = "push9()">&nbsp&nbsp <input type = "button" value ="+" onclick = "calc1()">&nbsp<br><br> <input type = "button" value ="4" onclick = "push4()">&nbsp <input type = "button" value ="5" onclick = "push5()">&nbsp <input type = "button" value ="6" onclick = "push6()">&nbsp&nbsp <input type = "button" value ="-" onclick = "calc2()">&nbsp<br><br> <input type = "button" value ="1" onclick = "push1()">&nbsp <input type = "button" value ="2" onclick = "push2()">&nbsp <input type = "button" value ="3" onclick = "push3()">&nbsp&nbsp <input type = "button" value ="×" onclick = "calc3()">&nbsp<br><br> <input type = "button" value ="0" onclick = "push0()">&nbsp <input type = "button" value ="=" onclick = "equal()">&nbsp <input type = "button" value ="C" onclick = "calc5()">&nbsp&nbsp <input type = "button" value ="÷" onclick = "calc4()">&nbsp<br><br> <br><br><hr><br>&nbsp&nbsp&nbsp <input type = "text" size ="10" name = "display">&nbsp <br><br><hr><br> </body> </html>

  • 超初心者です。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> に変えたいと思っています。 自分の頭ではいろいろやってもうまくいきませんでした。 どなたか御教授を宜しくお願い致します。

  • window.confirmのタイトル

    window.alert()やwindow.confirm()を使って、ボタンを押したら警告・確認ダイアログを出したいと思っています。 <input type="button" value="削除" onClick="window.confirm(本当によろしいですか?)"> みたいに。 ここで、ダイアログにタイトルを付けるにはどうしたらよいのでしょうか。 例えばFirefoxだと[Javascript アプリケーション]という風に表示されるので。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 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;が入っています。 これはなぜ入れているのか解説がありません。 特になくても困らないと思うのですが、なぜ入れているのでしょうか? 入れないことでどんな不具合が起きる可能性があるのでしょうか? 教えて下さい。 お願い致します。

  • 電卓 php

    php 電卓 現在phpにて電卓を作ろうと思っています。なので まずは1のボタンがクリックされたら画面に1と表示されるだけのプログラムを 作ってる最中なのですが、上手くいかず困っております。 以下ソースコードです。ファイル名「index.php」 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>HTML内でのPHPスクリプト - PHP入門</title> </head> <body> <?php $a = $_REQUEST['button1']; if (isset($_POST["button1"])) { $kbn = htmlspecialchars($_POST["button1"], ENT_QUOTES, "UTF-8"); switch ($kbn) { case "1": echo "登録処理"; break; } } ?> <form action="index.php" method="post"> <input type="button" name="button1" value="1"/> <input type="button" name="button2" value="2"/> <input type="button" name="button3" value="3"/> <input type="button" name="button4" value="4"/> <input type="button" name="button5" value="5"/> <input type="button" name="button6" value="6"/> <input type="button" name="button7" value="7"/> <input type="button" name="button8" value="8"/> <input type="button" name="button9" value="9"/> <input type="button" name="button10" value="10"/> <input type="submit" name="button_sum" value="計算する"> </form> </body> </html> 1のボタンをクリックしたら画面に1と表示させられるようにさせるにはどうしたら良いでしょうか? お馬鹿な質問かも知れませんが、ご教授の程願います。

    • ベストアンサー
    • PHP
  • JavaScriptのinput要素のonclick内で直接JavaS

    JavaScriptのinput要素のonclick内で直接JavaScript文を書きたい <input type="button" onclick="func()" value="ボタン"> のようにonclick内で関数を呼び出すことはできますが、 以下のようにスクリプトを直接書き込むのは可能でしょうか? (これは私が適当に考えただけなので多分動作はしませんが) <input type="button" onclick="javascript:( var a = 123; alert( a ); )" value="ボタン"> というのもちょっと試したいだけのときなど、 なるべく外部呼出しにしたくないことも多々あるもので・・

  • 入力した文字をalertで表示するスクリプトを作っています。

    入力した文字をalertで表示するスクリプトを作っています。 以下、IEとOperaでは動作しますが、FirefoxとGoogle Chromeでは動作しません。 書き方が悪いのでしょうか? <html> <head> <script language=JavaScript> <!-- function test(){ alert(input1.value); } // --> </SCRIPT> </HEAD> <BODY> <input type="text" name="input1"> <input type="button" value="テスト" onClick="test()"> </html>

専門家に質問してみよう