如何在不使用eval的情况下使用JavaScript的功能来创建计算器?

时间:2018-11-06 01:14:33

标签: javascript html

有点混乱,但是我需要JavaScript的函数来计算。我避免使用eval,因为我的老师没有教过。能帮我吗?

function A7() {

  var num = document.getElementById(7).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A8() {

  var num = document.getElementById(8).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A9() {

  var num = document.getElementById(9).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A10() {

  var num = document.getElementById(10).value;

  document.getElementById("display").value = document.getElementById("display").value + num


}

function A4() {

  var num = document.getElementById(4).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A5() {

  var num = document.getElementById(5).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A6() {

  var num = document.getElementById(6).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A11() {

  var num = document.getElementById(11).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A1() {

  var num = document.getElementById(1).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A2() {

  var num = document.getElementById(2).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A3() {

  var num = document.getElementById(3).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A12() {

  var num = document.getElementById(12).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

function A0() {

  var num = document.getElementById(0).value;
  document.getElementById("display").value = document.getElementById("display").value + num
}

var firstNum = getElementById(display);
document.getElementById("display").value = document.getElementById("display").value + num

var secondNum = getElementById(display);
document.getElementById("display").value = document.getElementById("display").value + num
operation = "";

function calculate() {
  if (operation = "+") {
    firstNum + secondNum;
    document.getElementById("display").value = firstNum + secondNum;
  } else if (operation = "-") {
    firstNum - secondNum;
    document.getElementById("display").value = firstNum - secondNum;
  } else if (operation = "/") {
    firstNum / secondNum;
    document.getElementById("display").value = firstNum / secondNum;
    else {
      firstNum * secondNum;
      document.getElementById("display").value = firstNum * secondNum;
    }
  }
<BODY>
  <form>
    <TABLE>
      <TR>
        <TD COLSPAN="4">
          <INPUT TYPE="text" ID="display" style="text-align:right">
        </TD>
      </TR>
      <TR>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="7" ID="7" onclick="A7()">
        </TD>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="8" ID="8" onclick="A8()">
        </TD>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="9" ID="9" onclick="A9()">
        </TD>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="/" ID="10" onclick="A10()">
        </TD>
      </TR>
      <TR>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="4" ID="4" onclick="A4()"> </TD>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="5" ID="5" onclick="A5()">
        </TD>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="6" ID="6" onclick="A6()">
        </TD>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="*" ID="11" onclick="A11()">
        </TD>
      </TR>
      <TD>
        <INPUT TYPE="BUTTON" VALUE="1" ID="1" onclick="A1()">
      </TD>
      <TD>
        <INPUT TYPE="BUTTON" VALUE="2" ID="2" onclick="A2()">
      </TD>
      <TD>
        <INPUT TYPE="BUTTON" VALUE="3" ID="3" onclick="A3()">
      </TD>
      <TD>
        <INPUT TYPE="BUTTON" VALUE="-" ID="12" onclick="A12()">
      </TD>
      <TR>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="0" ID="0" onclick="A0()">
        </TD>
        <TD>
          <INPUT TYPE="reset" VALUE="C" ID="C">
        </TD>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="=" ID="14" onclick="calculate()">
        </TD>
        <TD>
          <INPUT TYPE="BUTTON" VALUE="+" ID="13" onclick="A13()">
        </TD>
      </TR>
</BODY>

1 个答案:

答案 0 :(得分:2)

calculate()需要解析display字段以获得两个数字和运算。您可以使用简单的正则表达式来做到这一点。

此外,您需要使用==来比较用于分配的字符串,而不是=

编写

这样的行毫无意义
firstNum + secondNum;

这将计算总和,但不执行任何操作。您只需要将计算结果分配给display值的行。

function calculate() {
  var input = document.getElementById("display").value.match(/^(\d+)([+\-*\/])(\d+)$/);
  if (!input) {
    alert("Nothing to calculate");
    return;
  }
  var firstNum = parseInt(input[1]);
  var operation = input[2];
  var secondNum = parseInt(input[3]);
  if (operation == "+") {
    document.getElementById("display").value = firstNum + secondNum;
  } else if (operation == "-") {
    document.getElementById("display").value = firstNum - secondNum;
  } else if (operation == "/") {
    document.getElementById("display").value = firstNum / secondNum;
  } else {
    document.getElementById("display").value = firstNum * secondNum;
  }
}

相关问题