html css JavaScriptで電卓を作成したいです。

html css JavaScriptで電卓を作成したいのですが、下記のプログラムでは入力も受け付けず、動作しません。
どの様に修正すれば、良いでしょうか？

<!DOCTYPE html>
<html lang=ja> 
<head>
<meta charset="UTF-8" />
<title>簡易電卓</title>
<style type="text/css">
    button {
       height : 50px;
       width  : 50px;
    }
    button.equal {
       height : 160px;
    }
    button.zero {
       width : 160px;
    }
 div#panel {
   height : 25px;
   width  : 100%;
   border : 1px solid #000000;
   text-align : right;
   padding-right : 5px;
 }
</style>
<script type="text/JavaScript">
    var panelNumber ="0";
    var svButton ="";
    var svEnzanshi ="";
    var svNumber = 0;

    function clPanel() {
        panelNumber ="0";
        svButton ="";
        svEnzanshi ="";
        svNumber =0;
        document.getElementById("panel").innerText = panelNumber;
    }

    function pushNum(pushNumber) {
        svButton = panelNumber;

        if (panelNumber == "0"){
            panelNumber = pushNumber;
        }
        else {
            panelNumber += pushNumber;
        }

        document.getElementById("panel").innerText = panelNumber;
    }

    function keisan(svEnzanshi) {
        var panel = document.getElementById("panel");
        var number = parseFloat(panel.innerText);
        var answer = null;

        if (answer == "/" || number == "NULL") {
            alert("ゼロで除算はできません");
        return;
        }

        if(svButton == "+"
           || svButton == "-"
           || svButton == "*"
           || svButton == "/")
        {
           answer = enzanshi;
        }else{
         switch (svEnzanshi) {
            case "+":
                answer = svNumber + number;
            break;

            case "+":
                answer = svNumber + number;
            break;

            case "+":
                answer = svNumber + number;
            break;

            case "+":
                answer = svNumber + number;
            break;
         }

         if (answer != null) {
              panel.innerText = answer;
         }
         
         panelNumber = "0";
         svButton =  panelNumber;
         svEnzanshi = panelNumber;
         svNumber = parseFloat(panel.innerText);
      }
    }
</script>
</head>
<body>
<table border="0">
  <tr>
    <td colspan="5"><div id="panel">0</div></td>
  </tr>
  <tr>
    <td><button onclick="pushNum('7')">７</button></td>
    <td><button onclick="pushNum('8')">８</button></td>
    <td><button onclick="pushNum('9')">９</button></td>
    <td><button onclick="keisan('+')">＋</button></td>
    <td><button onclick="clpanel()">Ｃ</button></td>
  </tr>
  <tr>
    <td><button onclick="pushNum('4')">４</button></td>
    <td><button onclick="pushNum('5')">５</button></td>
    <td><button onclick="pushNum('6')">６</button></td>
    <td><button onclick="keisan('-')">－</button></td>
    <td rowspan="3"><button class="equal" onclick="keisan('=')">=</button></td>
  </tr>
  <tr>
    <td><button onclick="pushNum('1')">１</button></td>
    <td><button onclick="pushNum('2')">２</button></td>
    <td><button onclick="pushNum('3')">３</button></td>
    <td><button onclick="keisan('*')">×</button></td>
  </tr>
  <tr>
    <td colspan="3"><button class="zero" onclick="pushNum('0')">０</button></td>
    <td><button onclick="keisan('keisan('/')')">÷</button></td>
  </tr>
</table>
</body>
</html>

m.ts10806

2021/01/16 06:56

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと、エラー確認してください。ブラウザデベロッパツール→コンソール

BlackCat_0116

2021/01/16 07:05

ありがとうございます。 code機能を有効に致しました。また、chromeでerrorを確認しています。

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

回答1件

エラー出てます。

Syntaxは構文エラー。

JavaScriptはエラーがあったらその時点で処理中断します。
何も実行しなくても出ているエラーなので、何か実行しようとしても何も起きないのは当然と言えば当然です。

該当行は下記

js
1
2           answer = enzanshi;
3        }else{
4         switch (svEnzanshi) {
5            case "+";   //ここ

構文エラーが出たときに確認すべきは「構文」です。
「言語名　機能名」で調べて出てくる情報でも良いですが、
可能ならMDNなどのリファレンスを参照してください。

このエラーが出た場所からするとswitch文ですね。

MDNから引用

js
1switch (expression) {
2  case value1:
3    // 式の結果が value1 に一致する場合に実行する文
4    [break;]
5  case value2:
6    // 式の結果が value2 に一致する場合に実行する文
7    [break;]
8  ...
9  case valueN:
10    // 式の結果が valueN に一致する場合に実行する文
11    [break;]
12  [default:
13    // 式の値に一致するものが存在しない場合に実行する文
14    [break;]]
15}