質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.34%

html+javascriptで電卓作成 =が動作しない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,327

score 17

電卓をjavascriptで機能させたく、イコールの機能を作成しているのですが
参考サイトとと違いcボタンを作成したところ、イコールで表示されるのが
前に入力された数字になってしまいます。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>電卓</title>
</head>
<body>
<h1>電卓</h1>
<hr>

<form name="name">
<th colspan="3" align="right"><div id="out">0</div></th>
<th><div id="type"></div></th>

</form>

<form name="den">
<table boder="2">

<tb><input type="button" value="7" onClick="den_run(7)"></tb>    
<tb><input type="button" value="8" onClick="den_run(8)"></tb> 
<tb><input type="button" value="9" onClick="den_run(9)"></tb>     
<br>
<tb><input type="button" value="4" onClick="den_run(4)"></tb> 
<tb><input type="button" value="5" onClick="den_run(5)"></tb> 
<tb><input type="button" value="6" onClick="den_run(6)"></tb> 
<br>
<tb><input type="button" value="1" onClick="den_run(1)"></tb>
<tb><input type="button" value="2" onClick="den_run(2)"></tb>
<tb><input type="button" value="3" onClick="den_run(3)"></tb>
<br>
<tb><input type="button" value="0" onClick="den_run(0)"></tb>
<tb><input type="button" value="+" onClick="den_run('+')"></tb>
<tb><input type="button" value="-" onClick="den_run('-')"></tb>
<br>
<tb><input type="button" value="*" onClick="den_run('*')"></tb>
<tb><input type="button" value="/" onClick="den_run('/')"></tb>
<tb><input type="button" value="C" onClick="den_clear('C')"></tb>
<br>
<tb><input type="button" value="・" onClick="den_period('.')"></tb>
<tb><input type="button" value="=" onClick="den_equal('=')"></tb>
    </table>
</form>
<script language="javascript">
ans = 0; //計算中の数字
num = "0"; //押された数字キーを順番に表示
Key = ""; //1つ前に押されたキーの記録
kigou = ""; //数字かいくつか押された後記号キーの把握


function den_run(btn) { //変数btnでキーからの情報を受けとる
        if(!isNaN(btn)){ //数値か記号かで分岐
                if(kigou == "=") {
                       ans = 0;
                       kigou = "";
                }
              if(!isNaN(Key)) { //前に押されたキーは
                     if (num == "0") { //numが0の時
                             num = ""+btn; //キーからの情報
                     } else {

                    num += ""+btn; //真 連続して数字が押された場合
                     }
              } else {
                      num = ""+btn; //偽 記号の後数字、数値を文字列
              }
              document.getElementById("out").innerHTML = num;  //outの中身をnumへ          
        }else{
              if(!isNaN(Key)) {
                     ans = eval(ans + kigou + num);
                     num = "0";
                     document.getElementById("out").innerHTML = ans;
              }
              kigou = btn; //記号を受け取ったらbtnから記号へ
              document.getElementById("type").innerHTML = kigou; //記号が記録そのまま画面
        }
        document.getElementById("type").innerHTML = kigou;
        Key = btn; //直前のキーは何か
}
function den_period() {
    if (num.indexOf(".")<0) num +="."; //0より小さいときnumに.をプラスする。
    document.getElementById("out").innerHTML = num; //outの内容書き換え
}

function den_clear() {
    if(num == "c") { //現在の数字Cの場合
        ans = 0; //計算中の数字消去
        Key = ""; //1つ前の押されたキー削除
}
    num = "0"; //画面に何を表示
    kigou = ""; //記号は何を表示
    document.getElementById("out").innerHTML = num;
    document.getElementById("type").innerHTML = kigou;
}

function den_equal() {
    if(num == "=") {
        ans = eval(ans + kigou + num);
        Key = "=";
    }
    num = "0";
    kigou = Key;
    document.getElementById("out").innerHTML = ans;
    document.getElementById("type").innerHTML = "";
}
</script>

</body>
</html>   

参考と違う処理

function den_clear() {
    if(num == "c") { //現在の数字Cの場合
        ans = 0; //計算中の数字消去
        Key = ""; //1つ前の押されたキー削除
}
    num = "0"; //画面に何を表示
    kigou = ""; //記号は何を表示
    document.getElementById("out").innerHTML = num;
    document.getElementById("type").innerHTML = kigou;
}

function den_equal() {
    if(num == "=") {
        ans = eval(ans + kigou + num);
        Key = "=";
    }
    num = "0";
    kigou = Key;
    document.getElementById("out").innerHTML = ans;
    document.getElementById("type").innerHTML = "";
}

参考サイト

電卓参考

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/08/01 13:23

    HTMLはDOCTYPE 宣言入れるのでしたらbodyもhtmlも閉じタグまできちんと入れてください。

    キャンセル

  • m.ts10806

    2019/08/01 13:26

    HTMLでおかしい場所がありますが、これは?
    <input type="buttophpn" value="-" onClick="den_run('-')">

    キャンセル

  • hakusa.ppl

    2019/08/01 13:30

    すいません、コピペミスで
    input type="button" value="-" onClick="den_run('-')">が正解です

    キャンセル

回答 1

checkベストアンサー

+3

関数と引数に関して学ぶことをおすすめします(回答も書いています)

JavaScriptを学ばれている方とお見受けします。
参考サイトのコードを元に、自分でアレンジを加えてみると言うのはとても良いと思います。
多くの初学者が同様の方法で勉強して、いまプロとして活躍している人もいるでしょう。(自分もそうです)

さて、まずご質問の回答ですがアレンジして作られた関数 function den_clear() function den_equal()に引数の指定が無いようです。

また実行が den_clear('C')となっていて関数が

function den_clear() {
    if(num == "c") { //現在の数字Cの場合
        ans = 0; //計算中の数字消去
        Key = ""; //1つ前の押されたキー削除
}
    num = "0"; //画面に何を表示
    kigou = ""; //記号は何を表示
    document.getElementById("out").innerHTML = num;
    document.getElementById("type").innerHTML = kigou;
}


こうなっていますが、

  1. den_clear()はクリアボタンを押したときのみに実行される関数なので、現状引数は必要ない
  2. 仮に引数を持たせても良いが、numは変数名で使っているので、他の名前にする
  3. 仮に引数を持たせても良いが、if(num == "c")cが小文字なので、実行時のCと比較しても真(イコール ==)とみなされない。

と、いくつか問題があります。

想定通りの動きを期待する関数にするには
その1(引数はいらない、この関数はクリアボタンを押したときのみ動く。実行時はden_clear()とする)

function den_clear() {
    ans = 0; //計算中の数字消去
    Key = ""; //1つ前の押されたキー削除
    num = "0"; //画面に何を表示
    kigou = ""; //記号は何を表示
    document.getElementById("out").innerHTML = num;
    document.getElementById("type").innerHTML = kigou;
}

その2(引数をもたせ、将来的に複数のクリア機能を付ける)

function den_clear(press_key) {
    if(press_key == "C") { //現在の数字Cの場合
        ans = 0; //計算中の数字消去
        Key = ""; //1つ前の押されたキー削除
    }
    num = "0"; //画面に何を表示
    kigou = ""; //記号は何を表示
    document.getElementById("out").innerHTML = num;
    document.getElementById("type").innerHTML = kigou;
}

と、このようになります。

function den_equal()の方も同様に、引数をもたせてみてください。

また、最初に述べたとおり参考のコードを元に勉強するのはとても良いことですが、
参考にされてサイトはかなり古いようです。

JavaScriptを勉強する場合は特に新し目のコードを参考にすると良いでしょう。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/01 13:37

    励ましの言葉まで!
    ご丁寧にありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る