Как сохранить каждое значение после нажатия на оператор (+ - ..) в Javascript - PullRequest
Новая
       21

Как сохранить каждое значение после нажатия на оператор (+ - ..) в Javascript

0 голосов
/ 09 января 2020

Я довольно новичок в Javascript. Начал делать проект Odin; сейчас занимаюсь калькулятором проекта. Так что я застрял в сохранении значений после нажатия одного оператора. 

    numberButtons.forEach(function(numberButton){
    numberButton.addEventListener("click",function(){
        displayCurrent.textContent+=numberButton.value;
        currentValue=parseInt(displayCurrent.innerText);
    })
})

operatorButtons.forEach(function(operatorButton){
    operatorButton.addEventListener("click", function(){
        let operator=this.value;
        displayPrevious.textContent= displayCurrent.textContent+this.value;
        displayCurrent.textContent="";
        finalSum=operate(operator,currentValue,currentValue);
        currentValue=0;     


    })
})

Каждый раз, когда я нажимаю цифровую кнопку, она отображается на текущем дисплее, и значение сохраняется в текущем значении.

Теперь, нажимая кнопку оператора, я хочу переместить предыдущее значение на другой дисплей плюс с оператором, который нажат. Так что теперь, как я могу сохранить следующие значения при каждом нажатии оператора и вычислить результат. Например, я нажимаю 3 , тогда на текущем дисплее отображается 3, нажимаем + на текущем дисплее ничего не отображается, предыдущее 3+ текущее значение 3, нажимаем 5 it должно отображаться текущее значение 5, если я снова нажимаю + , текущее значение должно быть пустым, в то время как на предыдущем дисплее должно отображаться 8 или 5+3, пока я не нажму равным.

Извините для длинного поста я новичок и хочу выучить Javascript. Я надеюсь, что смогу сделать это:).

1 Ответ

0 голосов
/ 12 января 2020

Во втором кодовом блоке вам необходимо знать, что было предыдущим оператором (появляется в элементе displayPrevious), и использовать его для вызова operate(). Оператор, который соответствует нажатой кнопке, еще не может использоваться для вычисления, поскольку у вас еще нет второго операнда для него. Таким образом, этот оператор должен быть сохранен в переменной для последующего использования. 

operatorButtons.forEach(function (operatorButton) {
    operatorButton.addEventListener("click", function () {
        if (operator) { // Is there already a pending operator?
            finalSum = operate(operator, finalSum, currentValue);
        } else { // first time
            finalSum = currentValue;
        }
        displayCurrent.textContent = "";
        operator = this.value; // remember the new operator
        if (operator === "=") operator = ""; // this is not really an operator
        displayPrevious.textContent = finalSum + operator;
    });
});

В приведенном ниже фрагменте кода используется приведенный выше код с калькулятором minimalisti c. Это касается только вашего вопроса, но не касается деления, десятичных дробей, приоритета оператора, очистки ввода, ... 

let buttons = [...document.querySelectorAll("#divButtons input[type=button]")];
let numberButtons = buttons.filter(button => !isNaN("0"+button.value));
let operatorButtons = buttons.filter(button => isNaN("0"+button.value));
let displayCurrent = document.querySelector("#current");
let displayPrevious = document.querySelector("#previous");
let currentValue = 0;
let finalSum = 0;
let operator = "";

function operate(operator, a, b) {
    switch (operator) {
        case "+": return a+b;
        case "−": return a-b;
        case "×": return a*b;
    }
}

numberButtons.forEach(function (numberButton){
    numberButton.addEventListener("click", function () {
        displayCurrent.textContent += this.value;
        currentValue = +displayCurrent.textContent;
    });
})

operatorButtons.forEach(function (operatorButton) {
    operatorButton.addEventListener("click", function () {
        if (operator) { // Is there already a pending operator?
            finalSum = operate(operator, finalSum, currentValue);
        } else { // first time
            finalSum = currentValue;
        }
        displayCurrent.textContent = "";
        operator = this.value; // remember the new operator
        if (operator === "=") operator = ""; // this is not really an operator
        displayPrevious.textContent = finalSum + operator;
    });
});
input[type=button] { width: 100%; }
td[colspan="4"] { 
    border: 1px solid;
    text-align: right;
}
td[colspan="4"]:after {
    content: '.';
    visibility: hidden;
}
<table id="divButtons">
    <tr><td colspan="4" id="previous"></td></tr>
    <tr><td colspan="4" id="current"></td></tr>
    <tr><td><input type="button" value="7"></td><td><input type="button" value="8"></td><td><input type="button" value="9"></td><td><input type="button" value="+"></td></tr>
    <tr><td><input type="button" value="4"></td><td><input type="button" value="5"></td><td><input type="button" value="6"></td><td><input type="button" value="−"></td></tr>
    <tr><td><input type="button" value="1"></td><td><input type="button" value="2"></td><td><input type="button" value="3"></td><td><input type="button" value="×"></td></tr>
    <tr><td colspan="3"><input type="button" value="0"></td><td><input type="button" value="="></td></tr>
</table>
...