简单项目Jquery简单计算器

Question

我目前正在学习和练习我的前端 Web 技能，以使用 Jquery 创建一个简单的 Web 应用程序。我决定制作一个简单的计算器。我可以使用一些以输入数字作为参数的函数轻松完成此操作。但我正在努力让它有界面。

这是相关的 HTML。

<h1>Simple Calculator</h1>
<div class="inputbar">
    <input
      id="calcInput"
      type="text"
      class="displaycalc"
      onkeypress="return /[0-9]/i.test(event.key)"
      placeholder="0"
    />
</div>
<div class="container">
    <div class="digit seven btn">7</div>
    <div class="digit eight btn">8</div>
    <div class="digit nine btn">9</div>  
    <div class="op clear" onclick="clearDisplay()">CE</div>

    <div class="digit four btn">4</div>
    <div class="digit five btn">5</div>
    <div class="digit 6 btn">6</div>
    <div class="op multiply btn" data-operator="times">x</div>  

    <div class="digit one btn">1</div>
    <div class="digit two btn">2</div>
    <div class="digit three btn">3</div>
    <div class="op division btn" data-operator="divide">/</div>

    <div class="op changeminus btn">-/+</div>
    <div class="digit zero btn">0</div>
    
    <div class="op comma btn">.</div>
    <div class="op plus btn" data-operator="plus">+</div>
    <div class="op minus btn" data-operator="minus">-</div>
    <div id="equal" class="op equal btn">=</div>
</div>

我认为界面看起来没问题，但真正的问题是在我的外部 .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 无法真正到达我想去的地方。

我希望输入“显示”表现得像传统计算器一样，当我输入第一个输入的数字时，当我按下运算符时，无论是加、减还是乘，第二个输入都会自动显示输入覆盖之前的状态。

Answer 1

看起来有很多错误。

1. operator

   的作用域仅限于

   .op

   单击处理程序，但

   #equal

   单击处理程序也需要访问权限，因此应将变量移至函数之外。

2. inputSecond

   功能作为一个整体对我来说没有任何意义。除了清除显示之外，我没有看到任何目的，因此我只需将

   clearDisplay

   调用移至

   .op

   单击处理程序并删除此函数的其余部分。

3. .op

   点击处理程序不考虑何时按下“=”按钮，这也是一个操作，但没有

   data-operator

   属性，从而导致错误。

4. 调用

   calculation

   调用不同 op 函数的 switch 语句可以被简化（可能达到完全删除

   calculation

   函数的程度）。输入值位于数组

   input1

   中，所有函数都可以访问该数组，因此不需要将其作为参数传递到任何地方。我承认这实际上并不是一个错误，但它远非最简单的代码。

5. 您将“2”硬编码到每次对

   calculation

   的调用中，然后将

   input1

   array 视为 number。也许您还没有走到这一步，但也没有尝试显示结果，并且仍然需要完成其他清理操作，例如清除

   input1

   数组。

6. 这个计算器看起来除了最简单的计算之外没有其他用途，因此很容易被破坏。我假设目标是让这些简单的计算正常工作，稍后您会担心更复杂的用例，但我确实需要指出这一点。

我修复了下面我能修复的所有内容。我最终没有更改任何 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("");
}

jsfiddle 演示