为了账号安全,请及时绑定邮箱和手机立即绑定

计算器 - 单击运算符后如何存储数字?

计算器 - 单击运算符后如何存储数字?

莫回无 2022-09-23 16:22:03

我正在尝试用普通的javascript构建一个计算器。我设法存储了第一个数字和运算符,但我不知道如何存储第二个数字。有人可以给我一个提示或告诉mi,如果我到目前为止写的逻辑有问题吗?


这些是选择器和存储显示数字的变量


const input = document.querySelector(".display");

const numbers = document.querySelectorAll(".number");

const operators = document.querySelectorAll(".operator");

const dot = document.querySelector(".dot");

const clear = document.querySelector(".clear");

let displayValue = "0";

这些是用于存储数字的变量和要在函数中使用的运算符


let firstNum = "";

let secondNum = "";

let operator;


function calculator(firstNum, secondNum, operator) {

    operators.forEach(operator => {

        operator.addEventListener("click", (e) => {

            firstNum = displayValue;

            console.log(firstNum);

            operator = e.target.innerText;

            console.log(operator);

        })

    })

}



calculator();

我不知道如何在单击运算符后访问该号码。我可以在相同的函数中执行此操作吗?


<div class="container">

    <div class="display">0</div>

    <div class="buttons">

        <button class="clear">C</button>

        <div></div>

        <div></div>

        <div></div>

        <button class="number">7</button>

        <button class="number">8</button>

        <button class="number">9</button>

        <button class="operator">/</button>

        <button class="number">4</button>

        <button class="number">5</button>

        <button class="number">6</button>

        <button class="operator">x</button>

        <button class="number">1</button>

        <button class="number">2</button>

        <button class="number">3</button>

        <button class="operator">-</button>

        <button class="number">0</button>

        <button class="dot">.</button>

        <button class="operator">=</button>

        <button class="operator">+</button>

    </div>

</div>


查看完整描述

1 回答

?
小怪兽爱吃肉

TA贡献1550条经验 获得超1个赞

如果您只需要一个包含2个数字和一个运算符的计算器,则可以执行以下操作来存储每个数字以及运算符的值。


const input = document.querySelector(".display");

const numbers = document.querySelectorAll(".number");

const operators = document.querySelectorAll(".operator");

const dot = document.querySelector(".dot");

const clear = document.querySelector(".clear");

let displayValue = "0";


let firstNum = "";

let secondNum = "";

let operator = "";


numbers.forEach(number => {

    number.addEventListener("click", e => {

        if (operator === "") { // Read first number if no operator set yet

            firstNum += e.target.innerText;

            console.log(firstNum)

        } else { // Read second number

            secondNum += e.target.innerText;

            console.log(secondNum)

        }

    });

});


operators.forEach(op => {

    op.addEventListener("click", e => {

        operator = e.target.innerText;

        console.log(operator)

        // If equals operator, perform operation

    });

});

编辑:要详细说明有关第一个数字的值未正确打印到控制台的注释,请参阅下面的代码片段:


numbers.forEach(number => {

    number.addEventListener("click", e => {

        if (operator === "") { // Read first number if no operator set yet

            firstNum += e.target.innerText;

        } else { // Read second number

            secondNum += e.target.innerText;

        }

    });

});


operators.forEach(op => {

    op.addEventListener("click", e => {

        if (e.target.innerText !== "=") { // If the operator is not equals

            operator = e.target.innerText;


            console.log(firstNum); // Print the first number

            console.log(operator); // Print the operator


        } else { // If equals button clicked

            console.log(secondNum); // Print 2nd number


            switch (operator) { // Calculate and print output

                case "+":

                    console.log(parseInt(firstNum) + parseInt(secondNum));

                    break;


                case "-":

                    console.log(parseInt(firstNum) - parseInt(secondNum));

                    break;


                // etc...


                default:

                    break;

            }

        }


    });

});


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信