'Javascript calculator stringing multiple operators

I'm working on The Odin Project curriculum at the moment, and the calculator is the final project of the foundations. I have a mostly working app, but I just can't seem to be able to chain multiple operators without having to press the equals button in between. To clarify, I should be able to do 5+5+5 etc. At the moment however, it does nothing after the first 5+5. I have been stuck on this for quite a while, and am getting frustrated. Any help is greatly appreciated.

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Calculator</title>
</head>
<body>
    <div class="calculator">
        <div class="output">
            <div class="previous"></div>
            <div class="operator-display"></div>
            <div class="current"></div>
        </div>
        
            <button class="span-two clear">Clear</button>
            <button  class="span-two delete">Delete</button>    
            <button class="number">1</button>
            <button class="number">2</button>
            <button class="number">3</button>
            <button class="operator">+</button>
            <button class="number">4</button>
            <button class="number">5</button>
            <button class="number">6</button>
            <button class="operator">-</button>
            <button class="number">7</button>
            <button class="number">8</button>
            <button class="number">9</button>
            <button class="operator">*</button>
            <button class="decimal">.</button>
            <button class="number">0</button>        
            <button class="equals">=</button>
            <button class="operator">/</button>
        
    </div>
</body>
<script src="script.js"></script>
</html>

javascript:

const numberBtns = document.querySelectorAll(".number");
const operationBtns = document.querySelectorAll(".operator");
const equalsBtn = document.querySelector(".equals");
const clearBtn = document.querySelector(".clear");
const deleteBtn = document.querySelector(".delete");
const previous = document.querySelector(".previous");
const current = document.querySelector(".current");
const operatorDisplay = document.querySelector(".operator-display");
let decimalBtn = document.querySelector(".decimal");
let firstNumber = 0;
let secondNumber = 0;
let result;


//function to clear output screen
function clearOutput(){
    previous.innerText = "";
    current.innerText = "";
    operatorDisplay.innerText = "";
}

//calls function to clear screen on a click
clearBtn.addEventListener("click", ()=>{
    clearOutput();
})


//add number to screen on click
numberBtns.forEach(button => {
    button.addEventListener('click', ()=>{     
        current.innerText += button.innerText;
    })
})

decimalBtn.addEventListener('click', ()=>{
    addDecimal();    
})

//when pressing an operator button, the current operand is moved to the previous operand //place
operationBtns.forEach(button =>{
    button.addEventListener('click', ()=>{
        if (operatorDisplay.innerText != "") {
            operate();
        }
        else{
        previous.innerText = current.innerText;
        firstNumber = previous.innerText;
        current.innerText = "";
        operatorDisplay.innerText = button.innerText;
        }
    })
})


//calculates result based on chosen operator
equalsBtn.addEventListener('click', ()=>{
    secondNumber = current.innerText;
    operate();

    //Display error message if user tries to divide by 0
    if (secondNumber === "0" && operatorDisplay.innerText === "/") {
        errorMessage();
    }

    //pressing equals button does nothing if either operand is empty
    if (current.innerText != "" && previous.innerText != "") {
        displayResult();
    }
})

//deletes last number of the current operand on click
deleteBtn.addEventListener('click', ()=>{
    current.innerText = current.innerText.slice(0, -1);
})

//displays result
function displayResult(){
    clearOutput();
    //rounds the result in case of a ridiculous number of decimals
    current.innerText = Math.round(result * 10000) / 10000;
}

function operate(){
    if (operatorDisplay.innerText === "+") {
        result = parseFloat(firstNumber) + parseFloat(secondNumber);
    }
    if (operatorDisplay.innerText === "-") {
        result = parseFloat(firstNumber) - parseFloat(secondNumber);
    }
    if (operatorDisplay.innerText === "*") {
        result = parseFloat(firstNumber) * parseFloat(secondNumber);
    }
    if (operatorDisplay.innerText === "/") {
        result = parseFloat(firstNumber) / parseFloat(secondNumber);
    }
}

function errorMessage(){
    clearOutput();
    result = "Division by 0 impossible";
}

//adds decimal point
function addDecimal(){
    if (!current.innerText.includes(".")) {
        current.innerText += ".";                
    }
}

javascript calculator

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Javascript calculator stringing multiple operators

Sources

Related Questions