jqueryで電卓を作っています。数字のクリック時に２桁以上の表示ができません。

質問は表題の通りです。

jQueryで電卓を作っていますが、数字の１をクリックして表示領域に表示させることはできたのですが、
次に数字の２をクリックすると、当然１が消えて２が表示されます。

これを１２のように連続で表示させたいのですが、考え方が分かりません。

文字列の連結か、、？とうっすら思ったのですが、どのように記述するのがいいのでしょうか？

下記現状のコードです。（必要箇所だけ抜き出しました）

情報の不足がありましたら追記いたしますのでおっしゃってください。

よろしくお願いします。

html
1
2<script>
3
4  $(function(){
5
6$("#numberArea p").on('click',function(){
7    var text = $(this).text();
8    // alert(text)
9
10$("#displayWrapper p").text(text);
11
12});
13
14});
15
16</script>
17
18
19  <div id="displayWrapper">
20        <p>
21
22        </p>
23      </div>
24
25<div id="numberArea">
26            <div id="number7" data-index=7>
27              <p>
28                7
29              </p>
30            </div>
31
32            <div id="number8" data-index=8>
33              <p>
34                8
35              </p>
36            </div>
37
38            <div id="number9" data-index=9>
39              <p>
40                9
41              </p>
42            </div>
43            <div id="number4" data-index=4>
44              <p>
45                4
46              </p>
47            </div>
48
49            <div id="number5" data-index=5>
50              <p>
51                5
52              </p>
53            </div>
54
55            <div id="number6" data-index=6>
56              <p>
57                6
58              </p>
59            </div>
60
61            <div id="number1" data-index=1>
62              <p>
63                1
64              </p>
65            </div>
66
67
68            <div id="number2" data-index=2>
69              <p>
70                2
71              </p>
72            </div>
73
74            <div id="number3" data-index=3>
75              <p>
76                3
77              </p>
78            </div>
79
80            <div id="number0" data-index=0>
81              <p>
82                0
83              </p>
84
85            </div>
86
87            <div id="kara">
88              <p>
89
90              </p>
91
92            </div>
93
94            <div id="dotto">
95              <p>
96                .
97              </p>
98
99            </div>
100          </div><!--numberArea閉じタグ-->
101

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

回答2件

$("#displayWrapper p").text("value");は上書き保存です。
なので1を設定した後に2を設定すると、後から保存した2だけ表示されるのは正しい挙動です。

今回は両方表示したいので、
元々あるテキストを抜き出して変数に退避しておき(oldText)
新しいテキスト(newText)を一緒に入れて対応しましょう。

コードに起こすとこんな感じなるかと思います。

JavaScript
1$("#numberArea p").on('click',function(){
2    var $text = $("#displayWrapper p");
3    var oldText = $text.text();
4    var newText = $(this).text();
5    $text.text(oldText + newText);
6});

投稿2018/04/27 18:02

miyabi-sun

総合スコア21158

次のような感じでしょうか。
textの宣言をイベント処理の外側に出さないといけません。

javascript
1$(function(){
2  var text = '';
3  $("#numberArea p").on('click',function(){
4    text += $(this).text();
5    // alert(text)
6    $("#displayWrapper p").text(text);
7  });
8});