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

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

ただいまの
回答率

87.36%

html+javascriptで電卓作成 =を二度押さないと動作しない

解決済

回答 2

投稿 編集

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

score 17

先ほど質問させていただき、= 自体は正常に動作したのですが、二回押さないと反応しません
なぜでしょうか?

function den_equal() {
        ans = eval(ans + kigou + num); //=ボタンを押すとこの計算が動く
    document.getElementById("out").innerHTML = ans;
    document.getElementById("type").innerHTML = "";
}

html+javascript

<!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(!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)) {

              }
              kigou = btn; //記号を受け取ったらbtnから記号へ
              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() {
        ans = 0; //計算中の数字消去
        Key = ""; //1つ前の押されたキー削除
        num = "0"; //押されたキー削除
        kigou = ""; //記号キー削除
    document.getElementById("out").innerHTML = num;
    document.getElementById("type").innerHTML = kigou;
}

function den_equal() {
        ans = eval(ans + kigou + num); //=ボタンを押すとこの計算が動く
    document.getElementById("out").innerHTML = ans;
    document.getElementById("type").innerHTML = "";
}


</script>


</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • moredeep

    2019/08/01 15:38

    <tb>ではなく<td>かと。それも、<tr>の下にないとダメですし、inputタグはtableの直下には入りません。
    一度リファレンスを確認したほうが良いでしょう。

    キャンセル

  • m.ts10806

    2019/08/01 15:42

    > <tb>タグでボタンが横に並んでいるのではないのですか?
    そのようなタグはHTMLに存在しません。
    存在しないタグだから何も起きずにただ並べられたとおりに出ているだけです(ボタンタグ自体はインライン要素なので)

    回答しました。
    JavaScriptの動作よりHTMLの正規化が先です。
    できれば、自己解決は取り消してください(あまり参考になりません)

    キャンセル

  • m.ts10806

    2019/08/01 15:43

    たぶん一通り作りなおしたほうが良さそうです(前の回答でも「参考にする記事が古い」と指摘をうけていたと思います)

    キャンセル

回答 2

checkベストアンサー

+2

前提

HTMLをきれいにするところから始めましょう。
JavaScriptの多くはHTMLからのアクションを受け取り、HTMLに返します。
HTMLが正しくないと正しく情報の受け渡しができません。

tableタグがないのにthがあります

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

<tb>というタグは存在しません

<table boder="2">

<tb><input type="button" value="7" onClick="den_run(7)"></tb> 


あとboderではなくborderですね。
ただ、できればCSSでしましょう。
更にHTML5からは1か空("")しか指定できなくなりました。
2はありません。(ブラウザによっては効くかもしれませんが)

tableタグ内でセルをあらわす<td></td>タグの内部以外にHTMLタグを置いてはいけません

<tb><input type="button" value="+" onClick="den_run('+')"></tb>
<tb><input type="button" value="-" onClick="den_run('-')"></tb>
<br>

scriptタグのlanguageはHTML5で廃止されました

<script language="javascript">


<script>で充分です。

今のところ用途がなさそうなformタグも置いておく意味はないかなとは思います。
nameつけているからJavaScriptから後から使う予定なのでしょうか。

下記のようなサイトは活用しましょう。

あと、インデントは揃えましょう。

コードフォーマット機能のあるエディタを利用してください。
そのような機能のついたエディタはたいてい構文チェック機能もついています。

揃えた結果HTML部分のみ(コードフォーマットはEclipseの機能を利用)

    <h1>電卓</h1>
    <hr>
    <form name="name">
            <div id="out">0</div>
            <div id="type"></div>
    </form>
    <form name="den">
        <table border="1">
            <tr>
                <td><input type="button" value="7" onClick="den_run(7)"></td>
                <td><input type="button" value="8" onClick="den_run(8)"></td>
                <td><input type="button" value="9" onClick="den_run(9)"></td>
            </tr>
            <tr>
                <td><input type="button" value="4" onClick="den_run(4)"></td>
                <td><input type="button" value="5" onClick="den_run(5)"></td>
                <td><input type="button" value="6" onClick="den_run(6)"></td>
            </tr>
            <tr>
                <td><input type="button" value="1" onClick="den_run(1)"></td>
                <td><input type="button" value="2" onClick="den_run(2)"></td>
                <td><input type="button" value="3" onClick="den_run(3)"></td>
            </tr>
            <tr>
                <td><input type="button" value="0" onClick="den_run(0)"></td>
                <td><input type="button" value="+" onClick="den_run('+')"></td>
                <td><input type="button" value="-" onClick="den_run('-')"></td>
            </tr>
            <tr>
                <td><input type="button" value="*" onClick="den_run('*')"></td>
                <td><input type="button" value="/" onClick="den_run('/')"></td>
                <td><input type="button" value="C" onClick="den_clear('C')"></td>
            </tr>
            <tr>
                <td><input type="button" value="・" onClick="den_period('.')"></td>
                <td colspan="2"><input type="button" value="="
                    onClick="den_equal('=')"></td>
            </tr>
        </table>
    </form>

本題

まずは「なぜ2回押すことになるのか」デバッグしてみましょう。
「コードがどこを通っているか」確認をします。

    function den_equal() {
        console.log(1);
        ans = eval(ans + kigou + num); //=ボタンを押すとこの計算が動く
        document.getElementById("out").innerHTML = ans;
        document.getElementById("type").innerHTML = "";
    }

結果はブラウザ開発ツールの「コンソール」で確認できます。

画面キャプチャは貼りませんが1度目で「1」
2度目でもう1回「1」出てます。

den_equal()自体は反応していることが分かります。

では次は「それぞれの値はちゃんときているのか」
確認します。

    function den_equal() {
        console.log(ans);
        console.log(kigou);
        console.log(num);
        ans = eval(ans + kigou + num); //=ボタンを押すとこの計算が動く
        document.getElementById("out").innerHTML = ans;
        document.getElementById("type").innerHTML = "";
    }

ここでおかしいことに気づくと思います。

つまり、「ちゃんと情報が渡ってきていない」ということになります。

このようにして確認していってください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/01 15:44

    ご丁寧に、ありがとうございます。
    参考にさせていただきます。

    キャンセル

  • 2019/08/01 15:50

    HTMLがボロボロなのはJavaScriptをやっていくうえでは致命的です。
    ドキュメントもしっかりしているのでこれを機会にしっかり覚えましょう。

    キャンセル

  • 2019/08/01 15:54

    ありがとうございます。
    しっかりと一から覚えます

    キャンセル

0

<!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(!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; //記号が記録そのまま画面
        }
        Key = btn; //直前のキーは何か
}
function den_period() {
    if (num.indexOf(".")<0) num +="."; //0より小さいときnumに.をプラスする。
    document.getElementById("out").innerHTML = num; //outの内容書き換え
}

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

function den_equal() {
        ans = eval(ans + kigou + num); //=ボタンを押すとこの計算が動く
    document.getElementById("out").innerHTML = ans;
    document.getElementById("type").innerHTML = "";
}


</script>


</body>
</html>


追加しました!!!!!部分追加で解決しました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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