亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

計算器 - 單擊運算符后如何存儲數字?

計算器 - 單擊運算符后如何存儲數字?

莫回無 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貢獻1852條經驗 獲得超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 關注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號