###前提・実現したいこと
初めまして。プログラミング初心者です。主に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/ツール等のバージョンなど)

kei344

2017/02/02 08:20

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

yushi

2017/02/02 17:36

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

行動規範の内容に同意します

回答2件

ベストアンサー

はじめに

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

解説

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

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

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

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

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

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

答えのコード

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
2
3<style>
4td{
5	padding: 15px;
6}
7</style>
8
9<body>
10
11	<div id="calc">
12		<table border="1">
13			<tr>
14				<td>▶</td>
15				<td>7</td>
16				<td>8</td>
17				<td>9</td>
18				<td>÷</td>
19			</tr>
20
21			<tr>
22				<td></td>
23				<td>4</td>
24				<td>5</td>
25				<td>6</td>
26				<td>×</td>
27			</tr>
28
29			<tr>
30				<td></td>
31				<td>1</td>
32				<td>2</td>
33				<td>3</td>
34				<td>-</td>
35			</tr>
36
37			<tr>
38				<td>AC</td>
39				<td colspan="2">0</td>
40				<td>=</td>
41				<td>+</td>
42			</tr>
43
44		</table>
45		<br>
46		<input type="text" name="answer" value="" id="answer">
47	</div>
48</body>
49
50
51
52<script>
53
54/* セルがクリックされたときのイベント */
55$('#calc td').on('click', function(){
56	// 押されたテーブルの数値を取得
57	var num = $(this).text();
58
59	console.log(num);
60
61	// もし、イコールがおされたら、計算処理をする
62	if ( num === '=' ){
63		clickedEqual();						// この関数は別途定義しています
64		return;								// 処理をここで終えます
65	}
66
67	// もし、▶ボタンが押されたら、一文字削除する（ここはelse ifで書いてもOKです）
68	if ( num === '▶' ){
69		deleteLastNum();					// この関数は別途定義しています
70		return;								// 処理をここで終えます
71	}
72
73
74	// もし、ACボタンが押されたら、全て削除する（ここはelse ifで書いてもOKです）
75	if ( num === 'AC' ){
76		deleteAllNum();					// この関数は別途定義しています
77		return;								// 処理をここで終えます
78	}
79
80
81	// inputに入力されている文字を取得
82	var formula = $('#answer').val();
83
84	// inputに追加
85	$('#answer').val(formula + num);
86
87});
88
89
90
91/* イコールがクリックされたら */
92function clickedEqual(){
93	// inputの文字列を取得
94	var formula = $('#answer').val();
95
96	// ×や÷は、プログラムでは*と/で表記されるので、そのように置換
97	formula = formula.replace( /×/g , "*" ) ;
98	formula = formula.replace( /÷/g , "/" ) ;
99
100	// あんまりよろしくはないですが、今回はとりあえずということでeval関数を使って計算させます。
101	var result = eval(formula);
102
103	// 結果をinputにセット
104	$('#answer').val(result);
105
106}
107
108
109
110/* 一文字削除ボタンが押されたら */
111function deleteLastNum(){
112	// inputの文字列を取得
113	var formula = $('#answer').val();
114
115	// 一番最後の文字を削除
116	formula = formula.substr( 0, formula.length-1 ) ;
117
118	// 結果をinputにセット
119	$('#answer').val(formula);
120}
121
122
123
124/* すべてクリアボタンが押されたら */
125function deleteAllNum(){
126	// inputをリセット
127	$('#answer').val("");
128}
129
130
131</script>
132

投稿2017/01/30 18:13

編集2017/01/31 05:05

nnahito

総合スコア2004

kei344

2017/01/30 18:28

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

nnahito

2017/01/31 01:15

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

yushi

2017/01/31 16:48

ご丁寧にありがとうございます。先ほど、nnahitoさんのプログラムを参考にしながら、自分が作ったプログラムに当てはめてみました（まんまコピペだと申し訳ないので・・）。途中でかっこを入れ忘れたり、ACや▶がうまく動かなかったり（ボックス内は消えているが、数字を押すと直前に押した数字が残った状態のまま出てしまう）と時間はかなりかかってしまいましたが、自分で試行錯誤し、なんとか無事に動くようになりました。ほとんど人の力を借りた状態ではありますが、「自分で設計したものがちゃんと動いてくれた」という感動を実感できて嬉しいです。いつか人に頼らず、自分一人である程度設計できるように勉強していきたいところです。こちらで安心して課題提出できます！本当に助かりました。

行動規範の内容に同意します

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

JavaScript
1    if(atai == "="){
2      answer = eval(total);
3    }else if(atai == "AC"){
4      total = "";
5      atai = "";
6    }else{
7      total += atai;
8    }
9```**動くサンプル：**[https://jsfiddle.net/z81e9tvp/](https://jsfiddle.net/z81e9tvp/)
10
11---
12
13ちなみに `eval(total)` とされていますが、`÷` `×` ではエラーになります。（ `*` `/` にするか、演算前に置換する必要がある）
14
15---
16
17電卓は色々難しいジャンルなので、がんばってください。
18
19【JavaScript - イベントハンドラについて(54279)｜teratail】
20[https://teratail.com/questions/54279](https://teratail.com/questions/54279)
21
22【JavaScript - JavaScriptで取得した式を計算したい（四則演算のみ）(60996)｜teratail】
23[https://teratail.com/questions/60996](https://teratail.com/questions/60996)