javascript - 计算器不返回结果的功能

Question

我试图找出为什么我的数学函数没有将结果返回到屏幕上。我认为我的 switch 语句可能有问题，但对我来说看起来很好。我将字符串转换为数字，而不是传递给 switch 函数来为我做数学运算。我只用数字 1 和 2 测试它，并且只设置了 + 和 = 运算符。它适用于存储字符串并显示它们，但我无法让我的函数进行所有计算以正常工作。

出了什么问题？

var prevNum = "";
var currNum = "";
var setNumber;
var resultNum;
var operator;


function display(x) {

  var screen = document.getElementById("display");

  if (resultNum) { //reset result Numbers
    resultNum = "";
  } else {
    currNum += x;
    screen.value = currNum;
  }

}


function math() {

  //converts string to number
  prevNum = parseFloat(prevNum);
  currNum = parseFloat(currNum);

  switch (operator) {
    case "+":
      resultNum = prevNum + currNum;
      break;

    case "-":
      resultNum = prevNum + currNum;
      break;

    case "*":
      resultNum = prevNum + currNum;
      break;

    default:
      resultNum = currNum;

  }

  screen.value = resultNum;

}


//store number
function storeNum(x) {
  prevNum = currNum;
  operator = x;
  currNum = "";
}

<div class="container">
  <div id="screen">
    <input type="text" id="display" disabled>
    <p id="result"></p>
  </div>
  <div id="keypad">
    <input type="button" value="C">
    <input type="button" value="CE" onclick="clear()">
    <input type="button" value="^">
    <input type="button" value="+" onclick="storeNum('+')">
    <br>
    <input type="button" value="9">
    <input type="button" value="8">
    <input type="button" value="7">
    <input type="button" value="-">
    <br>
    <input type="button" value="6">
    <input type="button" value="5">
    <input type="button" value="4">
    <input type="button" value="*">
    <br>
    <input type="button" value="3">
    <input type="button" value="2" onclick="display('2')">
    <input type="button" value="1" onclick="display('1')">
    <input type="button" value="/">
    <br>
    <input type="button" value="0">
    <input type="button" value=".">
    <input type="button" value="=" onclick="math()">
  </div>
</div>

Answer 1

首先，如果您了解如何使用开发人员工具在浏览器上调试代码，那将是一笔不错的投资。您可能想在线观看一些视频教程。

您的代码不工作的原因是因为变量 screen 是在方法 display 中声明的，而您正试图在方法 math 中访问它。为此，您必须在任何方法(具有全局范围)之外声明 screen也就是说，您可以在计算器上进行很多改进，例如:

1. 你不应该像你正在做的那样改变每个数字的方法的参数(display('1')，display('2')......)，尝试从值中检索数字按钮:

   <input type="button" value="1" onclick="display()">
   function display(e){
       e = e || window.event;
       e = e.target || e.srcElement   
       screen.value += e.value; //e.value contains the value of the button      
   }
   

   您可以为运算符(operator)做同样的事情:

   <input type="button" value="+" onclick="storeNum()">
   function storeNum(op) {
       op = op || window.event;
       op = op.target || op.srcElement
       operator = op.value;
   }
   

2. 尽可能避免使用 switch 语句。例如，您可以使用评估字符串的 eval() 方法，例如 eval("1+2")=3。所以你的 math() 函数可以简单地变成:

   function math(){
       operation = prevNum + operator + currNum
       resultNum = eval(operation)
   }
   

3. 最后，您可能想为您的计算器考虑一些更好的功能要求。现在它一次只能执行一个操作。也许您想评估更复杂的表达式。

不要复制粘贴上面的代码，因为那只是为了说明我的观点。您可以在此处找到工作版本:https://jsfiddle.net/gtato/6mtej33g/