javascript - 从 JS 计算器中的两个输入中获取值

Question

为类创建一个香草 JS 计算器，我已经获得了要在显示器中显示的数字和运算符值。无法为我的运算符制定逻辑，因为当它们被单击时，它们不应该出现在显示中，而是向正确的运算符触发事件侦听器，并在单击 = 时显示答案。对于初学者，我只专注于添加 1 + 2 = 3。

<div id="calculator-container">   
    <div>
         <input id='calculator-display' type="text" value='' placeholder='0' disabled />
    </div>        
        <div id="calculator-buttons">
            <input type="button" class='number-button' id='one' value='1' />
            <input type="button" class='number-button' id='two' value='2' />
            <input type="button" class='number-button' id='three' value='3' />
            <input type="button" class='number-button'  id='four' value='4' />
            <input type="button" class='number-button'  id='five' value='5' />
            <input type="button" class='number-button'  id='six' value='6' />
            <input type="button" class='number-button'  id='seven' value='7' />
            <input type="button" class='number-button'  id='eight' value='8' />
            <input type="button" class='number-button'  id='nine' value='9' />
            <input type="button" class='number-button'  id='zero' value='0' />
            <input type="button" class='number-button'  id='decimal' value='.' />
            <input type="button" class='operator-button'  id='times' value='&times' />
            <input type="button" class='operator-button'  id='divide' value='&divide' />
            <input type="button" class='operator-button'  id='add' value='+' />
            <input type="button" class='operator-button'  id='minus' value='-' />
            <input type="button" class='operator-button'  id='equal' value='=' />
            <input type="button" class='operator-button'  id='clear' value='AC' />
        </div>
</div>

    <script src="app.js"></script>
</body>


const display = document.getElementById('calculator-display');
let firstNumber = null;
let secondNumber = null;
let operand = null;

function numberButtonClicked() {
    document.querySelectorAll('.number-button').forEach(item => {
        item.addEventListener('click', (e) => {
            display.value += e.target.value;
        })
    })
};

function allClear() {
    document.getElementById('clear').addEventListener('click', function() {
        if(!display.value == '') {
            display.value = '';
        }
    });
}


function operatorClicked() {
    const operator = document.querySelectorAll('.operator-button');
    operator.forEach(item => {
        item.addEventListener('click', (e) => {
            display.value = e.target.value;
        })
    })
}


operatorClicked();
allClear();
numberButtonClicked();

标签： javascript