使用jQuery制作简单的计算器项目

Question

我目前正在学习和练习我的前端网页开发技能，用jQuery来创建一个简单的网页应用。我决定做一个简单的计算器。我可以很容易地用一些函数来处理输入的数字作为参数。但是我在制作界面方面遇到了困难。
这是相关的HTML代码：

Simple Calculator

    


    7
    8
    9  
    CE
    4
    5
    6
    x  
    1
    2
    3
    /
    -/+
    0
    .
    +
    -
    =

我觉得界面看起来还不错，但真正的问题出在我的外部.js文件上。

let input1 = [];
//this ONLY shows the live numbers pressed
$(".digit").click((evt) => {
    let currentValue = $("#calcInput").val();
    // Append the clicked button's value to the current input value
    $("#calcInput").val(currentValue + evt.target.innerHTML);
});
$(".op").click((evt) => {
    input1.push(parseFloat($("#calcInput").val()));//when an OP clicked, input1 value updated
    let operator = $(evt.target).data("operator");
    inputSecond();
});
$("#equal").click( (evt) => {
    switch(operator){
        case "plus":
            calculation(input1,2,plus);
            break;
        case "minus":
            calculation(input1,2,minus)
            break;
            default:
                break;
    }
});
function inputSecond(){
    $(".digit").click(() => {
    clearDisplay();
    $(".digit").click((evt) => {
        let currentValue = $("#calcInput").val();
        // Append the clicked button's value to the current input value
        $("#calcInput").val(currentValue + evt.target.innerHTML);
    });
})
}
function plus(num1,num2){
   console.log (num1+num2);
}
function minus(num1,num2){
    console.log(num1-num2);
}
function times(num1,num2){
    console.log(num1*num2);
}
function divide(num1,num2){
    console.log(num1/num2);
}
function calculation(num1,num2,operatorFunction){
    operatorFunction(num1,num2);
}
function clearDisplay(){
    $("#calcInput").val("");
}

我希望有个专家能帮帮我，因为GPT并没有真正帮我达到我想要的效果。
我想让输入“显示”像传统的计算器一样，当我输入完第一个数字后，按下一个运算符，无论是加、减或乘，第二个数字会自动覆盖输入显示的之前的状态。

gsm2009 · Answer

这里看起来有很多错误

operator变量只在.op点击事件处理器中定义，但是#equal点击事件处理器也需要访问它，所以这个变量应该移动到函数外面。
inputSecond函数整体上对我来说没有意义。我看不出它有什么用处，除了清空显示，所以我只是把clearDisplay调用移到.op点击事件处理器中，然后删除这个函数的其余部分。
3.. op点击事件处理器没有考虑到当按下“=”按钮时的情况，这也是一个运算符，但是它没有data-operator属性，导致一个错误。
调用calculation函数的switch语句可以简化（甚至可以完全去掉calculation函数）。输入的值在数组input1中，这个数组对所有函数都可访问，所以它不需要作为参数传递到任何地方。我承认这不是一个真正的错误，但是它远非代码能达到的最简单的程度。
你在每次调用calculation时都硬编码了一个“2”，然后把input1数组当成一个数字。也许你还没有做到这一步，但是这里也没有尝试显示结果，以及其他一些清理操作，比如清空input1数组。
这个计算器看起来只能处理最简单的计算，所以很容易出错。我猜你的目标是让这些简单的计算能够正常工作，然后再考虑更复杂的情况，但是我还是需要指出这一点。

我尽力修复了我能发现的所有错误。我没有改变任何HTML代码

let input1 = [];
let operator
//this ONLY shows the live numbers pressed
$(".digit").click((evt) => {
  let currentValue = $("#calcInput").val();
  // Append the clicked button's value to the current input value
  $("#calcInput").val(currentValue + evt.target.innerHTML);
});
$(".op").click((evt) => {
  input1.push(parseFloat($("#calcInput").val())); //when an OP clicked, input1 value updated
  operator = $(evt.target).data("operator") ?? operator;
  clearDisplay();
});
$("#equal").click((evt) => {
  switch (operator) {
    case "plus":
      calculation(plus);
      break;
    case "minus":
      calculation(minus);
      break;
    default:
      break;
  }
});
function plus(num1, num2) {
  return num1 + num2;
}
function minus(num1, num2) {
  return num1 - num2;
}
function times(num1, num2) {
  return num1 * num2;
}
function divide(num1, num2) {
  return num1 / num2;
}
function calculation(operatorFunction) {
  const result = operatorFunction(...input1);
  $("#calcInput").val(result);
  input1 = [];
}
function clearDisplay() {
  $("#calcInput").val("");
}