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

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

ただいまの
回答率

90.32%

  • HTML

    9593questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7116questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQueryで電卓のクリック入力・演算ができない

解決済

回答 2

投稿

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

yushi

score 6

前提・実現したいこと

初めまして。プログラミング初心者です。主にHTMLとCSSを中心に独学で勉強しています。
今、jQueryを勤務先で習っており、課題として電卓の作成が出されました。
電卓の作り方をいろいろ調べているのですが、JavaScriptがほとんどで良い参考サイトが見つからず、困っています。

現時点の問題としては、クリック処理を打ち込んだにもかかわらず、テキストボックスに数字が反映されないことです。

電卓につけたい機能としては、四則演算と一文字消す機能で、
いろいろ演算してエラーを見ながら修正・・・といきたいのですが、数字が出てくれないようでは前に進めません。

clickがあるのになぜ動かないのでしょうか。
また、足し算だけでも良いのでクリックがうまくいったあとに必要な演算処理をヒントを教えていただければと思います。

なんとか自分の力で課題をクリアしてみたいです。
みなさんのお力を貸してもらえれば嬉しいです。

ソースコード HTML

<body>

 <div id="calc">
  <table>
   <tr>
    <td></td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>÷</td>
   </tr>

   <tr>
    <td></td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>×</td>
   </tr>

   <tr>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>-</td>
   </tr>

   <tr>
    <td>AC</td>
    <td colspan="2">0</td>
    <td>=</td>
    <td>+</td>
   </tr>

 </table>
  <br>
  <input type="text" name="answer" value="" />
 </div>
</body>

ソースコード jQuery

$(function(){
var total = "";

 $("#calc td").click(function(){
    var atai = $(this).text();
    var answer = "";

/*四則演算と一文字消す処理
 この部分が不明*/

//=とACの処理
    if(atai == "="){
      answer = eval(total);
    }else if(atai == "AC"){
      total = "";
      atai = ""
    }

//テキスト部分の処理
    $("#calc input[name=answer]").val(total);

    if(atai == "="){
      total = "";
    }

});
});

試したこと

知恵袋や電卓のサンプルコードを見ながらまねて作成する。
(クリックしても数字が反映されないままです。電卓部分をクリックするとテキストボックスにある内容が消えてしまいます)。

補足情報(言語/FW/ツール等のバージョンなど)

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2017/02/02 17:20

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

    キャンセル

  • yushi

    2017/02/03 02:36

    すみません!仕事で対応遅れました。解決したので締め切らせていただきます。

    キャンセル

回答 2

checkベストアンサー

+1

 はじめに

初心者の方……ということなので、まるっと答えを載せてしまいます。

 解説

コードの前に、解説をば。

JavaScriptがほとんどで良い参考サイトが見つからず、困っています。

jQueryもJavaScriptなんですが……
そのへんは、http://semooh.jp/jquery/あたりが参考になりますね。

現時点の問題としては、クリック処理を打ち込んだにもかかわらず、テキストボックスに数字が反映されないことです。

面倒なので、input[name=answer]ではなく、id="answer"にしてしまいました。
申し訳ありません。
一応$('#calc input[name=answer]').val(formula + num);でも動くようですね。

その他は、コードにコメントを記載しておきました。
不明な点がありましたら、ご返信ください。

 答えのコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<style>
td{
    padding: 15px;
}
</style>

<body>

    <div id="calc">
        <table border="1">
            <tr>
                <td></td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>÷</td>
            </tr>

            <tr>
                <td></td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>×</td>
            </tr>

            <tr>
                <td></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>-</td>
            </tr>

            <tr>
                <td>AC</td>
                <td colspan="2">0</td>
                <td>=</td>
                <td>+</td>
            </tr>

        </table>
        <br>
        <input type="text" name="answer" value="" id="answer">
    </div>
</body>



<script>

/* セルがクリックされたときのイベント */
$('#calc td').on('click', function(){
    // 押されたテーブルの数値を取得
    var num = $(this).text();

    console.log(num);

    // もし、イコールがおされたら、計算処理をする
    if ( num === '=' ){
        clickedEqual();                        // この関数は別途定義しています
        return;                                // 処理をここで終えます
    }

    // もし、▶ボタンが押されたら、一文字削除する(ここはelse ifで書いてもOKです)
    if ( num === '▶' ){
        deleteLastNum();                    // この関数は別途定義しています
        return;                                // 処理をここで終えます
    }


    // もし、ACボタンが押されたら、全て削除する(ここはelse ifで書いてもOKです)
    if ( num === 'AC' ){
        deleteAllNum();                    // この関数は別途定義しています
        return;                                // 処理をここで終えます
    }


    // inputに入力されている文字を取得
    var formula = $('#answer').val();

    // inputに追加
    $('#answer').val(formula + num);

});



/* イコールがクリックされたら */
function clickedEqual(){
    // inputの文字列を取得
    var formula = $('#answer').val();

    // ×や÷は、プログラムでは*と/で表記されるので、そのように置換
    formula = formula.replace( /×/g , "*" ) ;
    formula = formula.replace( /÷/g , "/" ) ;

    // あんまりよろしくはないですが、今回はとりあえずということでeval関数を使って計算させます。
    var result = eval(formula);

    // 結果をinputにセット
    $('#answer').val(result);

}



/* 一文字削除ボタンが押されたら */
function deleteLastNum(){
    // inputの文字列を取得
    var formula = $('#answer').val();

    // 一番最後の文字を削除
    formula = formula.substr( 0, formula.length-1 ) ;

    // 結果をinputにセット
    $('#answer').val(formula);
}



/* すべてクリアボタンが押されたら */
function deleteAllNum(){
    // inputをリセット
    $('#answer').val("");
}


</script>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/31 03:28

    > おそらく、clickに問題があるのではないかな
    これはどのような問題でしょうか?

    キャンセル

  • 2017/01/31 10:15

    ごめんなさい、私の勘違いですね。
    clickが反応しなくなるのは、動的に作成したときですね……
    失礼しました

    キャンセル

  • 2017/02/01 01:48

    ご丁寧にありがとうございます。
    先ほど、nnahitoさんのプログラムを参考にしながら、自分が作ったプログラムに当てはめてみました(まんまコピペだと申し訳ないので・・)。

    途中でかっこを入れ忘れたり、ACや▶がうまく動かなかったり(ボックス内は消えているが、数字を押すと直前に押した数字が残った状態のまま出てしまう)と時間はかなりかかってしまいましたが、自分で試行錯誤し、なんとか無事に動くようになりました。

    ほとんど人の力を借りた状態ではありますが、「自分で設計したものがちゃんと動いてくれた」という感動を実感できて嬉しいです。いつか人に頼らず、自分一人である程度設計できるように勉強していきたいところです。

    こちらで安心して課題提出できます!
    本当に助かりました。

    キャンセル

0

$("#calc input[name=answer]").val(total); の部分で total に atai が入っていないので表示されません。

    if(atai == "="){
      answer = eval(total);
    }else if(atai == "AC"){
      total = "";
      atai = "";
    }else{
      total += atai;
    }

動くサンプル:https://jsfiddle.net/z81e9tvp/


ちなみに eval(total) とされていますが、÷ × ではエラーになります。( * / にするか、演算前に置換する必要がある)


電卓は色々難しいジャンルなので、がんばってください。

【JavaScript - イベントハンドラについて(54279)|teratail】
https://teratail.com/questions/54279

【JavaScript - JavaScriptで取得した式を計算したい(四則演算のみ)(60996)|teratail】
https://teratail.com/questions/60996

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/01 01:34

    回答ありがとうございます!
    無事にテキストへ反映されました!うまく動いてくれて嬉しいです。

    キャンセル

  • 2017/02/01 01:40

    横からお節介しますが…。
    動かす事よりも「なぜ動かなかったのか」「どんな問題があったのか」「数ある解決策の内、どの方法が適切なのか」を自分なりに言葉に出して表すのが大切だと思います。
    「自分の力で課題をクリアしてみたい」のなら尚のこと、お二方に説明頂いた内容を解読して理解する行程が必要だと思います。

    キャンセル

  • 2017/02/02 01:32

    はい、ありがとうございます。
    確かに、初めて知った関数も多くプログラムの難しさを痛感させられました。

    それと同時に、プログラムで問題があった際、自分で考えて解決できた時のうれしさも感じることができました。答えていただいた方のプログラムを理解し、より楽しく勉強できたらと思います。

    キャンセル

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

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

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

  • HTML

    9593questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7116questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。