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

Question

 // function clearfunc() // { // document.getElementById("abcd").innerHTML="0"; // } function show(id) { if (id == "zero") document.getElementById("abcd").innerHTML = "0"; else if (id == "one") document.getElementById("abcd").innerHTML = "1"; else if (id == "two") document.getElementById("abcd").innerHTML = "2"; else if (id == "three") document.getElementById("abcd").innerHTML = "3"; else if (id == "four") document.getElementById("abcd").innerHTML = "4"; else if (id == "five") document.getElementById("abcd").innerHTML = "5"; else if (id == "six") document.getElementById("abcd").innerHTML = "6"; else if (id == "seven") document.getElementById("abcd").innerHTML = "7"; else if (id == "eight") document.getElementById("abcd").innerHTML = "8"; else if (id == "nine") document.getElementById("abcd").innerHTML = "9"; else if (id == "clear") document.getElementById("abcd").innerHTML = ""; } function afterPlus(id) { var whichOperator = ""; if (id == "equal") { b = Number(document.getElementById("abcd").innerHTML); switch (whichOperator) { case "plus": document.getElementById("abcd").innerHTML = (a + b); break; case "minus": document.getElementById("abcd").innerHTML = (a - b); break; case "mul": document.getElementById("abcd").innerHTML = (a * b); break; case "divide": document.getElementById("abcd").innerHTML = (a / b); break; default: document.getElementById("ans").innerHTML = b; } } else { whichOperator = id; //eg i need + - * and / to be got a = Number(document.getElementById("abcd").innerHTML); } }

 input { height: 100px; width: 150px; border-radius: 10px; border-style: none; background-color: black; color: white; } .abcde /*for display purposes*/ { background-color: blue; height: 100px; width: 608px; border-radius: 10px; color: white; font-size: 100px; }

 <h1>Basic calculator</h1> <div class="abcde" id="abcd"> </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)">

I think I have done everything fine.

expected output-: I press 1.

1 is displayed through function show(id)

now 1 is in paragraph id="abcd"

then user presses +

it's id="plus" is passed to function afterplus(id) .

I check if id==equals or not.

if the id!=equal , then store a=previous value as a number as well as the operator as a string.

else if id==equal then, I need to save b as the past number.

then switch case will run, the operator id =(+ * / -) will be used in switch case and the proper calculation will be done.

Answer 1

I tried my best to not make many changes in your code, also tried to keep as simple as possible. Here are some changes I've made.

• CSS:

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;
      }

• HTML:

<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)">

• JavaScript:

 /* 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;
    }

}