为什么我的JavaScript计算器不工作？

//函数clearfunc（）
// {
//document.getElementById（“abcd”）.innerHTML=“0”；
// }
功能显示（id）{
如果（id=“零”）
document.getElementById（“abcd”）.innerHTML=“0”；
否则，如果（id=“一”）
document.getElementById（“abcd”）.innerHTML=“1”；
否则，如果（id=“两个”）
document.getElementById（“abcd”）.innerHTML=“2”；
否则，如果（id=“三”）
document.getElementById（“abcd”）.innerHTML=“3”；
否则，如果（id=“四”）
document.getElementById（“abcd”）.innerHTML=“4”；
否则，如果（id=“五”）
document.getElementById（“abcd”）.innerHTML=“5”；
否则，如果（id=“六”）
document.getElementById（“abcd”）.innerHTML=“6”；
否则，如果（id=“七”）
document.getElementById（“abcd”）.innerHTML=“7”；
否则，如果（id=“八”）
document.getElementById（“abcd”）.innerHTML=“8”；
否则，如果（id=“九”）
document.getElementById（“abcd”）.innerHTML=“9”；
否则如果（id=“清除”）
document.getElementById（“abcd”）.innerHTML=“”；
}
功能afterPlus（id）{
var whichOperator=“”；
如果（id=“相等”）{
b=编号（document.getElementById（“abcd”）.innerHTML）；
开关（whichOperator）{
案例“附加”：
document.getElementById（“abcd”）.innerHTML=（a+b）；
打破
案例“减”：
document.getElementById（“abcd”）.innerHTML=（a-b）；
打破
案例“mul”：
document.getElementById（“abcd”）.innerHTML=（a*b）；
打破
“划分”一案：
document.getElementById（“abcd”）.innerHTML=（a/b）；
打破
违约：
document.getElementById（“ans”）.innerHTML=b；
}
}否则{
whichOperator=id；//例如我需要+-*和/来获取
a=编号（document.getElementById（“abcd”）.innerHTML）；
}
}

输入{
高度：100px；
宽度：150px；
边界半径：10px；
边框样式：无；
背景色：黑色；
颜色：白色；
}
.abcde
/*供展示之用*/
{
背景颜色：蓝色；
高度：100px；
宽度：608px；
边界半径：10px；
颜色：白色；
字体大小：100px；
}

基本计算器

我尽量不对代码进行太多更改，也尽量保持简单。这里是我做的一些改变

• CSS:

• HTML:

---

你应该加把小提琴。我在这里回答了一个类似的问题：考虑使用switch语句而不是长if-else？考虑将“get元素”的结果放入变量，而不是重复多次。每次调用<代码> TealPux<代码>时，<代码> >哪个操作符< /C> >被设置为空字符串。由于else中的

whichOperator=id

函数一完成就会丢失，因此您的

开关将始终基于该空字符串。您能否通过编辑此帖子的方式解释这是如何回答问题的？如果解释了这些变化，问题作者和未来的读者将受益匪浅。是的，欢迎评论。与粘贴源代码相比，这将有助于明确区别。
input {
          height: 100px;
          width: 150px;
          border-radius: 10px;
          border-style: none;
          background-color: black;
          color: white;
      }

      .abcde
      /*for display purposes*/

      {
          position: relative;
          background-color: blue;
          height: 100px;
          width: 608px;
          border-radius: 10px;
          color: white;
          font-size: 100px;
      }

      .calc {
          position: relative;
          height: auto;
          width: 608px;
          color: white;
          font-size: 24px;
      }

      .abcde-2,
      .operator {
          width: 150px;
          height: 90px;
          text-align: left;
          position: absolute;
          right: 5px;
          text-align: right;
          font-weight: bolder;
      }

      .operator {
          top: -94px;
      }

      .abcde-2 {
          top: -50px;
      }

<h1>Basic calculator</h1>
<div class="abcde" id="abcd"></div>
<div class="calc">
    <div class="operator" id="operator"></div>
    <div class="abcde-2" id="abcde-2"></div>
</div>

<input type="button" value="0" id="zero" onclick="return show(this.id)">
<input type="button" value="1" id="one" onclick="return show(this.id)">
<input type="button" value="2" id="two" onclick="return show(this.id)">

<input type="button" value="+" id="plus" onclick="return  afterPlus(this.id)"> <br>

<input type="button" value="3" id="three" onclick="return show(this.id)">
<input type="button" value="4" id="four" onclick="return show(this.id)">
<input type="button" value="5" id="five" onclick="return show(this.id)">

<input type="button" value="-" id="minus" onclick="return afterPlus(this.id)"> <br>

<input type="button" value="6" id="six" onclick="return show(this.id)">
<input type="button" value="7" id="seven" onclick="return show(this.id)">
<input type="button" value="8" id="eight" onclick="return show(this.id)">

<input type="button" value="*" id="mul" onclick="return afterPlus(this.id)"> <br>

<input type="button" value="9" id="nine" onclick="return show(this.id)">

<input type="button" value="C" id="clear" onclick="return show(this.id)">

<input type="button" value="=" id="equal" onclick="return afterPlus(this.id)">
<input type="button" value="/" id="divide" onclick="return afterPlus(this.id)">

 /* Check if answered */
var answered = false;

function show(id) {
    if (answered) {
        /* If answered, make it false to add new value */
        answered = false;
        document.getElementById("abcd").innerText = "";
    }

    if (id == "zero")
        document.getElementById("abcd").innerText += "0";
    else if (id == "one")
        document.getElementById("abcd").innerText += "1";
    else if (id == "two")
        document.getElementById("abcd").innerText += "2";
    else if (id == "three")
        document.getElementById("abcd").innerText += "3";
    else if (id == "four")
        document.getElementById("abcd").innerText += "4";
    else if (id == "five")
        document.getElementById("abcd").innerText += "5";
    else if (id == "six")
        document.getElementById("abcd").innerText += "6";
    else if (id == "seven")
        document.getElementById("abcd").innerText += "7";
    else if (id == "eight")
        document.getElementById("abcd").innerText += "8";
    else if (id == "nine")
        document.getElementById("abcd").innerText += "9";
    else if (id == "clear") {
        document.getElementById("abcd").innerText = "";
        answered = false;
    }

}

function afterPlus(id) {
    var whichOperator = id;
    var answer = "";
    switch (whichOperator) {
        /* If equal button pressed */
        case "equal":
            if (document.getElementById("abcde-2").innerText != "") {

                 /* Operator Math  */
                switch (document.getElementById("operator").innerText) {
                    case "+":
                        answer = Number(document.getElementById("abcde-2").innerText) + Number(document.getElementById("abcd").innerText);
                        break;
                    case "-":
                        answer = Number(document.getElementById("abcde-2").innerText) - Number(document.getElementById("abcd").innerText);
                        break;
                    case "*":
                        answer = Number(document.getElementById("abcde-2").innerText) * Number(document.getElementById("abcd").innerText);
                        break;
                    case "/":
                        answer = Number(document.getElementById("abcde-2").innerText) / Number(document.getElementById("abcd").innerText);
                        break;

                    /* No Math Operator? then  */
                    default:
                        answered = false;
                        break;
                }

                /* Showing Answere  */    
                document.getElementById("abcd").innerText = "";
                document.getElementById("abcd").innerText = answer;
                answered = true;
            }
            break;

             /* other then equal button  */
        default:
            document.getElementById("operator").innerText = document.getElementById(whichOperator).value;
            document.getElementById("abcde-2").innerText = document.getElementById("abcd").innerText;
            document.getElementById("abcd").innerText = "";
            answered = false;
            break;
    }

}