Fatal编程技术网
  • javascript/
  • Javascript计算器，如何保存相等后的显示值

Javascript计算器，如何保存相等后的显示值

javascript

Javascript计算器，如何保存相等后的显示值,javascript,Javascript,只要在每次两个操作数计算后重置计算器，该计算器就可以正常工作。我所需要做的就是，如果我点击equals，当前的显示值将用作下一次计算中的第一个操作数。我为我的小解决方案lol感到自豪，直到我测试了它。这是我的代码 var backspaceBtn=document.getElementById（“backspace”）； var equalsBtn=document.getElementById（“等于”）； var decimalBtn=document.getElementById（“十进

只要在每次两个操作数计算后重置计算器，该计算器就可以正常工作。我所需要做的就是，如果我点击equals，当前的显示值将用作下一次计算中的第一个操作数。我为我的小解决方案lol感到自豪，直到我测试了它。这是我的代码

var backspaceBtn=document.getElementById（“backspace”）；
var equalsBtn=document.getElementById（“等于”）；
var decimalBtn=document.getElementById（“十进制”）；
var clearBtn=document.getElementById（“clear”）；
var operatorBtns=document.querySelectorAll（“.operatorBtn”）；
var displayValEl=document.getElementById（'display'）；
var calcNumBtns=document.getElementsByClassName（“numBtn”）；
//用于存储操作数和运算符的变量
var displayVal=“0”；
var finalVal=“”；
var运算符=”；
var num1；
var num2；
//当用户单击数字时更新显示
var updateDisplay=（clkObj）=>{
var btnText=clkObj.target.innerText；
如果（displayVal==“0”）
displayVal=“”；
displayVal+=btnText；
displayValEl.innerText=displayVal；
}
//将事件侦听器添加到每个num按钮，设置“单击”功能以更新屏幕
for（设i=0；i{
var sign=clkObj.target.innerText；
道岔（标志）{
格“+”：
运算符=“+”
num1=parseFloat（displayVal）
displayVal=“0”；
displayValEl.innerText=displayVal
打破
案例“-”：
运算符=“-”
num1=parseFloat（displayVal）
displayVal=“0”；
displayValEl.innerText=displayVal
打破
案例“÷”：
运算符=“÷”
num1=parseFloat（displayVal）
displayVal=“0”；
displayValEl.innerText=displayVal
打破
案例“x”：
运算符=“x”
num1=parseFloat（displayVal）
displayVal=“0”；
displayValEl.innerText=displayVal
打破
违约：
打破
};
}
//将事件侦听器添加到操作员BTN，设置单击以更新num1和操作员变量
for（设i=0；i{
如果（！displayVal.includes（“.”）
displayVal+=“”
displayValEl.innerText=displayVal；
}
//捕获第二个值并执行操作
equalsBtn.onclick=（）=>{
num2=解析浮点（displayVal）；
开关（操作员）{
格“+”：
finalVal=num1+num2；
displayValEl.innerText=finalVal；
打破
案例'-'：
finalVal=num1-num2；
displayValEl.innerText=finalVal；
打破
案例“x”：
finalVal=num1*num2；
displayValEl.innerText=finalVal；
打破
//嵌套开关以检查是否被零除。
案例“÷”：
开关（真）{
案例num1==0 | | num2==0：
警报（“不能偏离零”）
打破
}
最终值=num1/num2；
displayValEl.innerText=finalVal；
打破
违约：
打破
}
num1=显示值；
num2=0；
运算符=”；
}
clearBtn.onclick=（）=>{
displayVal=“0”；
运算符=”；
num1=0
num2=0
displayValEl.innerText=displayVal；
}
backspaceBtn.onclick=（）=>{
让lengthOfDisplay=displayVal.length；
displayVal=displayVal.slice（0，长度显示-1）
如果（displayVal==“”）
displayVal=“0”；
displayValEl.innerText=displayVal；
}

文件

JavaScript计算器

0
+
-
x
÷
7.
8.
9
⇤
4.
5.
6.
C

1.
2.
3.
.
0
=
您希望保留更改并在后续计算中使用保留的值。因此，您实际上要重构
equalsBtn
单击处理程序来实现这一点

equalsBtn.onclick = () => {  
  num2 = parseFloat(displayVal);

  switch (operator) {
    case '+':
      finalVal += num2;          
      break;
    case '-':
      finalVal -= num2;
      break;
    case 'x':
      finalVal *= num2;  
      break;
    case '÷':
      //for division by zero.
      if (num2 === 0)
      {
        alert("Cant divide by Zero");
        return;
      }
      finalVal /= num2;
      break;
    default:
      break;
  }
  displayValEl.innerText = finalVal.toString();
  num1 = num2;
  num2 = 0;
  operator = "";
};
您还需要确保在
clearBtn
单击处理程序中清除
finalVal

clearBtn.onclick = () => {
  displayVal = "0";
  operator = "";
  num1 = 0;
  num2 = 0;
  finalVal = 0;
  displayValEl.innerText = displayVal;
};
编辑：此外，关于此值持久性的状态，您应该处理一些场景：在初始化范围内，updateDisplay、operator click和
deleteBtn
单击以满足其他期望

var backspaceBtn=document.getElementById（“backspace”）；
var equalsBtn=document.getElementById（“等于”）；
var decimalBtn=document.getElementById（“十进制”）；
var clearBtn=document.getElementById（“clear”）；
var operatorBtns=document.querySelectorAll（“.operatorBtn”）；
var displayValEl=document.getElementById（'display'）；
var calcNumBtns=document.getElementsByClassName（“numBtn”）；
//用于存储操作数和运算符的变量
var displayVal=“0”；
var运算符=”；
var finalVal=0；
var num1=0；
var num2=0；
//当用户单击数字时更新显示
var updateDisplay=（clkObj）=>{
var btnText=clkObj.target.innerText；
变量shouldResetCalc=（运算符==“”&&finalVal！==0）；
displayVal=（displayVal==“0”| | shouldResetCalc）
？btnText
：displayVal+btnText；
如果（应重置计算）
最终值=0；
displayValEl.innerText=displayVal；
}
//将事件侦听器添加到每个num按钮，设置“单击”功能以更新屏幕
for（设i=0，max=calcNumBtns.length；i{
var sign=clkObj.target.innerText；
道岔（标志）{
格“+”：
运算符=“+”
num1=解析浮点（displayVal）；
clearDisplay（）；
打破
案例“-”：
运算符=“-”
num1=parseFloat

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="numbers">
        <div class="number">0</div>
        <div class="number">1</div>
        <div class="number">2</div>
        <div class="number">3</div>
        <div class="number">4</div>
        <div class="number">5</div>
        <div class="number">6</div>
        <div class="number">7</div>
        <div class="number">8</div>
        <div class="number">9</div>
    </div>

    <div id="operations">
        <div class="operation">+</div>
        <div class="operation">-</div>
        <div class="operation">*</div>
        <div class="operation">/</div>
    </div>

    <div id="control">
        <div id="equal">=</div>
        <div id="reset">C</div>
    </div>

    <div id="result">Res</div>


</body>

</html>

<style>
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: #96a5af;
    }


    #numbers>.number {
        display: inline;
    }

    #operations>.operation {
        display: inline;
    }

    #contro>* {}
</style>


<script>
    // getting all nodes
    const numbers = Array.from(document.getElementById("numbers").children);
    const operations = Array.from(document.getElementById("operations").children);

    const calc = document.getElementById("equal");
    const equal = document.getElementById("result");
    const reset = document.getElementById("reset");

    // calcualtion is the calculation we watnt to do
    let calculation = "";

    // [...numbers, ...operations] combines the numbers and operations array so I dont have to create an eventlister for both
    [...numbers, ...operations].forEach((el) => {
        document.addEventListener("click", (e) => {
            //My Code is not Ideal, so I check here wearhter I accually clicked on the button I wanted to
            if (e.target.isSameNode(el)) {
                // and add the text of the button to my calculation
                calculation += e.target.innerText;
                console.log('e.target.innerText', e.target.innerText)

                // if I just added a number, I show my current result
                if (!isNaN(parseFloat(+e.target.innerText)) && isFinite(e.target.innerText)) {
                    evaluate();
                }
            }

        })
    })

    // manually calculate result
    calc.addEventListener("click", () => {
        evaluate()
    })

    // reset by clearing calculation
    reset.addEventListener("click", () => {
        calculation = "";
    })

    // helper function which calculates result and sets my HTML to it
    const evaluate = () => {
        equal.innerHTML = eval(calculation) + "";
    };
</script>



const str = "3+45*5/5+3";

const evalute = () => {
    let strArr = str.split(/([+\-*/](?=[0-9]+))|(?=[+\-*/])/);
    let pos;

    do  {
        pos = strArr.findIndex(el => el == "*")
        if (!!~pos) strArr.splice(pos - 1, 3, +strArr[pos - 1] * +strArr[pos + 1]);
    } while (!!~pos);

    do  {
        pos = strArr.findIndex(el => el == "/")
        if (!!~pos) strArr.splice(pos - 1, 3, +strArr[pos - 1] / +strArr[pos + 1]);
    } while (!!~pos);

    do  {
        pos = strArr.findIndex(el => el == "+")
        if (!!~pos) strArr.splice(pos - 1, 3, +strArr[pos - 1] + +strArr[pos + 1]);
    } while (!!~pos);

    do  {
        pos = strArr.findIndex(el => el == "-")
        if (!!~pos) strArr.splice(pos - 1, 3, +strArr[pos - 1] - +strArr[pos + 1]);
    } while (!!~pos);

    return strArr[0];
}

console.log(evalute(str));