電卓が動作しない(javascript)

前提

電卓を作成したのですが、正しく動作しないです。
電卓の画面に数字を入力はできるのですが、計算(加減乗除）が不可能です。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8
9    <title>Calculator</title>
10</head>
11<body>
12    <div class="wrapper">
13        <section class="screen">
14            0
15        </section>
16        
17    <section class="calc-buttons">
18        <div class="calc-button-row">
19            <button class="calc-button double">
20                C
21            </button>
22            <button class="calc-button">
23                &larr;
24            </button>
25            <button class="calc-button">
26                &divide;
27            </button>
28        </div>
29        <div class="calc-button-row">
30            <button class="calc-button">
31                7
32            </button>
33            <button class="calc-button">
34                8
35            </button>
36            <button class="calc-button">
37                9
38            </button>
39            <button class="calc-button">
40                &times;
41            </button>
42        </div>
43        <div class="calc-button-row">
44            <button class="calc-button">
45                4
46            </button>
47            <button class="calc-button">
48                5
49            </button>
50            <button class="calc-button">
51                6
52            </button>
53            <button class="calc-button">
54                &minus;
55            </button>
56        </div>
57        <div class="calc-button-row">
58            <button class="calc-button">
59                1
60            </button>
61            <button class="calc-button">
62                2
63            </button>
64            <button class="calc-button">
65                3
66            </button>
67            <button class="calc-button">
68                &plus;
69            </button>
70        </div>
71        <div class="calc-button-row">
72            <button class="calc-button triple">
73                0
74            </button>
75            <button class="calc-button">
76                &equals;
77            </button>
78            
79        </div>
80    </section>
81    </div>
82    <script src="script.js"></script>
83
84    
85</body>
86</html>
87

javasvript
1let runningTotal = 0;
2let buffer = "0";
3let previousOperator;
4
5const screen = document.querySelector('.screen');
6
7function buttonClick(value){
8    if(isNaN(value)){
9        handleSymbol(value);
10    }else{
11        handleNumber(value);
12    }
13    screen.innerText = buffer;
14}
15
16function handleSymbol(symbol){
17    switch(symbol){
18        case 'C':
19            buffer = '0';
20            runningTotal = 0;
21            break;
22        case '=':
23            if(previousOperator === null){
24                return
25            }
26            flushOperation(parseInt(buffer));
27            previousOperator = null;
28            buffer = runningTotal;
29            runningTotal = 0;
30            break;
31        case '←':
32            if(buffer.length === 1){
33                buffer = '0';
34            }else{
35                buffer = buffer.substring(0, buffer.length - 1);
36            }
37            break;
38        case '+':
39        case '−':
40        case '×':
41        case '÷':
42            handleMath(Symbol);
43            break;
44    }
45}
46
47function handleMath(symbol){
48    if(buffer === '0'){
49        return;
50    }
51
52    const intBuffer = parseInt(buffer);
53
54    if(runningTotal === 0){
55        runningTotal = intBuffer;
56    }else{
57        flushOperation(intBuffer);
58    }
59    previousOperator = symbol;
60    buffer = '0';
61}
62
63function flushOperation(intBuffer){
64    if(previousOperator === '+'){
65        runningTotal += intBuffer;
66    }else if(previousOperator === '−'){
67        runningTotal -= intBuffer;
68    }else if(previousOperator === '×'){
69        runningTotal *= intBuffer;
70    }else if(previousOperator === '÷'){
71        runningTotal /= intBuffer;
72    }
73}
74
75function handleNumber(numberString){
76    if(buffer === "0"){
77        buffer = numberString;
78    }else{
79        buffer += numberString;
80    }
81}
82function init(){
83    document.querySelector('.calc-buttons').addEventListener('click',function(event){
84        buttonClick(event.target.innerText);
85    })
86}
87
88init();

試したこと

コードを1通り見直しました。

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

回答1件

ベストアンサー

もしかして、大文字・小文字の違いでしょうか？
誤）Symbol
正）symbol

javascript
1//handleMath(Symbol);
2handleMath(symbol);

■ 修正結果
https://jsfiddle.net/cx20/h98zug62/

投稿2023/01/13 18:25

編集2023/01/14 02:46

cx20

総合スコア4633

kazato

2023/01/15 15:45

動作しました。ありがとうございます！プログラミングを初めてまだ間もないのですが、こういったミスを防ぐために何か行っていることはありますか。

cx20

2023/01/15 17:33

> こういったミスを防ぐために少し環境等の準備が面倒ですが TypeScript であれば、厳密な型指定が行える為、今回のようなミスが防げるかと思います。関数の引数を文字型として指定しておけば Symbol の代入はエラーになる為です。 function handleMath(symbol: string){ あとは、地道にデバッグする、とかでしょうか。

kazato

2023/01/23 15:36

返信遅くなりすみません。アドバイスありがとうございます。TypeScript少し興味があるので、少し触れてみます。

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