jQueryを使った電卓作成。小数点を含めると計算が出来ない

質問は表題の通りです。

課題で電卓をjQueryで作っています。

電卓のデザインは添付画像の通りです。

整数＋整数の四則演算は概ね完成に近いのですが、
小数点が入る数値の計算が出来ません。

成功パターン① 10 - 0.5 = 9.5

エラーパターン① 10 + 0.5 = 100.5　という表示になる。
エラーパターン②　1.5 + 1.5 = 1.51.5 という表示になる。
エラーパターン③　1.5 を入力後、6という数値を入力すると 21という数値がディスプレイにでる。

とりあえず私が確認できているエラーパターンは上記になります。

必要箇所のみのコードを添付したかったのですが、どこが間違っているのか分からなかったので、長くなりますが、全てのコードを添付致しました。

その他必要情報がありましたら追記いたしますのでおっしゃってください。

宜しく御願いします。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>電卓</title>
6  <link rel="stylesheet" type="text/css" href="base.css"><!--最後に読み込んだものが適用される-->
7  <script type="text/javascript" src="js/jquery.js"></script>
8  <script>
9
10$(function(){
11
12var number = 0;
13var totalnumber = 0;
14
15var purasu = 0;
16var purasunamber = 0;
17
18var hiku = 0;
19var hikunamber = 0;
20
21var kakeru = 0;
22var kakerunamber = 0;
23
24var waru = 0
25var warunamber = 0;
26
27var totalnumbernibai = 0;
28var purasumainasu = 0;
29var parsent = 0;
30var isdotted = 0;
31
32
33// 数値の取得(通常時)
34$("#numberArea p").on('click',function(){
35  if(isdotted == 0){
36    number = $(this).data('index');//数値の取得
37    totalnumber = (totalnumber * 10) + number;//桁数を増やす為の桁上げと文字の連結
38    $("#displayWrapper p").text(totalnumber);
39    alert('isdottedの番号' + isdotted);
40    alert('totalnumberは' + totalnumber);
41    alert('totalnumberの型式 ' + jQuery.type(totalnumber));
42  }
43});
44
45// 数値の取得（ドットの後）
46$("#numberArea p").on('click',function(){
47  if(isdotted == 1){
48    // totalnumber = parseInt($(this).text());
49    number = $(this).data('index');//数値の取得
50    totalnumber = totalnumber + number;//桁数を増やす為の桁上げと文字の連結
51    $("#displayWrapper p").text(totalnumber);
52    isdotted = 0;
53
54    alert('totalnumberは' + totalnumber);
55    alert('totalnumberの型式 ' + jQuery.type(totalnumber));
56  }else{
57
58  }
59
60});
61
62// ドットの処理
63$('#dotto').on('click',function(){
64  if(isdotted == 1){
65
66  alert(isdotted);
67
68  }else{
69
70  totalnumber = totalnumber + '.';
71  $("#displayWrapper p").text(totalnumber);
72  isdotted = 1;
73  alert('isdotted' + isdotted)
74  alert('totalnumber' + totalnumber)
75  alert('totalnumberの型式' + jQuery.type(totalnumber));
76
77}});
78
79
80
81// ＋ボタンを押した時
82$("#purasu").on('click',function(){
83purasu = 1;
84alert('purasuの数値' + purasu);
85$("#displayWrapper p").text('+');
86purasunamber = totalnumber;//一回前番号入れる
87alert("purasunamberは" + purasunamber);
88totalnumber = 0;
89});
90
91// -ボタンを押したとき
92$("#hiku").on('click',function(){
93hiku = 1;
94alert('hikuの数値' + hiku);
95$("#displayWrapper p").text('-');
96hikunamber = totalnumber;
97alert("hikunamberは" + hikunamber);
98totalnumber = 0;
99})
100
101// ×ボタンを押したとき
102$("#kakeru").on('click',function(){
103kakeru = 1;
104alert('kakeruの数値' + kakeru);
105$("#displayWrapper p").text('×');
106kakerunamber = totalnumber;
107alert("kakerunamberは" + kakerunamber);
108totalnumber = 0;
109})
110
111
112//÷ボタンを押したとき
113$("#waru").on('click',function(){
114waru = 1;
115alert('waruの数値' + waru);
116$("#displayWrapper p").text('÷');
117warunamber = totalnumber;
118alert("warunamberは" + warunamber);
119totalnumber = 0;
120})
121
122
123//=ボタンを押した時
124$("#iko-ru").on('click',function(){
125// alert("イコール")
126if(purasu == 1){
127  alert("purasunamberは" + purasunamber);
128  alert("totalnumberは" + totalnumber);
129  totalnumber = purasunamber + totalnumber;
130  $("#displayWrapper p").text(totalnumber);
131  purasu = 0;
132}
133
134if(hiku == 1){
135  alert("hikunamberは" + hikunamber);
136  alert("totalnumberは" + totalnumber);
137  totalnumber = hikunamber - totalnumber;
138  $("#displayWrapper p").text(totalnumber);
139  hiku = 0;
140}
141
142if(kakeru == 1){
143  alert("kakeruは" + kakeru);
144  alert("totalnumberは" + totalnumber);
145  totalnumber = kakerunamber * totalnumber;
146  $("#displayWrapper p").text(totalnumber);
147  kakeru = 0;
148}
149
150if(waru == 1){
151  alert("waruは" + waru);
152  alert("totalnumberは" + totalnumber);
153  totalnumber = warunamber / totalnumber;
154  $("#displayWrapper p").text(totalnumber);
155  waru = 0;
156}
157
158
159});
160  
161
162// ACボタン
163$("#AC").on('click',function(){
164totalnumber = 0;
165// alert(totalnumber);
166$("#displayWrapper p").text(totalnumber);
167});
168
169
170// プラマイボタン押した時
171$("#±").on('click',function(){
172  if($(this).hasClass('mainasu')){
173    $(this).removeClass('mainasu')
174$("#displayWrapper p").text(totalnumber);
175  }else{
176    // alert(totalnumber);
177    totalnumbernibai = totalnumber * 2;
178    purasumainasu = totalnumber - totalnumbernibai;
179    // alert(purasumainasu);
180    $("#displayWrapper p").text(purasumainasu);
181    $(this).addClass('mainasu')
182  }
183});
184
185
186// ％ボタン押した時
187$("#parsent").on('click',function(){
188parsent = totalnumber * 0.01;
189$("#displayWrapper p").text(parsent);
190})
191
192
193
194});
195
196</script>
197
198</head>
199
200<body>
201  <div id="bodyWrapper">
202    <div id="displayWrapper">
203        <p>
2040
205        </p>
206      </div>
207
208<div id="wrapper">
209
210      <div id="Leftwrapper">
211        <div id="operatorWrapper">
212          <div id="AC">
213            <p>
214              AC
215            </p>
216
217          </div>
218
219          <div id="±">
220            <p>
221              ±
222            </p>
223
224          </div>
225
226          <div id="parsent">
227            <p>
228              %
229            </p>
230          </div>
231        </div><!--operatorWrapper閉じタグ-->
232
233
234          <div id="numberArea">
235            <div id="number7" >
236              <p data-index=7>
237                7
238              </p>
239            </div>
240
241            <div id="number8">
242              <p data-index=8>
243                8
244              </p>
245            </div>
246
247            <div id="number9">
248              <p data-index=9>
249                9
250              </p>
251            </div>
252            <div id="number4">
253              <p data-index=4>
254                4
255              </p>
256            </div>
257
258            <div id="number5">
259              <p data-index=5>
260                5
261              </p>
262            </div>
263
264            <div id="number6">
265              <p data-index=6>
266                6
267              </p>
268            </div>
269
270            <div id="number1">
271              <p data-index=1>
272                1
273              </p>
274            </div>
275
276
277            <div id="number2">
278              <p data-index=2>
279                2
280              </p>
281            </div>
282
283            <div id="number3">
284              <p data-index=3>
285                3
286              </p>
287            </div>
288
289            <div id="number0">
290              <p data-index=0>
291                0
292              </p>
293
294            </div>
295
296            <div id="kara">
297              <p>
298
299              </p>
300
301            </div>
302
303
304            <div id="dotto">
305                .
306            </div>
307
308          </div><!--numberArea閉じタグ-->
309
310        </div><!--Leftwapper閉じタグ-->
311
312      <div id="Arithmetic">
313        <div id="waru">
314          <p>
315            ÷
316          </p>
317        </div>
318
319        <div id="kakeru">
320          <p>
321            ×
322          </p>
323        </div>
324
325        <div id="hiku">
326          <p>
327            -
328          </p>
329        </div>
330
331        <div id="purasu">
332          <p>
333            +
334          </p>
335        </div>
336
337        <div id="iko-ru">
338          <p>
339            =
340          </p>
341        </div>
342
343      </div>
344
345    </div><!--wrapper-->
346    </div><!--bodyWrapper閉じタグ-->
347
348
349
350  </body>
351  </html>
352