CODEWITHSUNDEEP
javascripthtmlcsscalculator
Flavius Popa
Flavius Popa

Reputation: 21

Instead executing the calculate function my calculator shows the last value I've put in to calculate

I'm currently following a how to make a calculator tutorial on yt wher I use html css and js. I've just made the calculate() function, and when I call for it in the equal.addEventListener the both values that I want to calculate show up with the operator, but instead of the values to get calculated and get the result on the screen, it shows me on the result screen only the last value that I've chosen, like 9+3, I press equal and the result that shows on the screen is 3 instead of 12 https://codepen.io/pflaviuss/pen/QWxKOGd

<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
    <title>Calculator</title>
    
  </head>
  <body>
    <h1>Calculator</h1>
    <div class="calculator">
      <div>
        <div class="first-row">
        <div class="result">
            <div class="previous"></div>
            <div class="current"></div>
        </div>
        <button class="clear btn">C</button>
        </div>
   
      <div class="buttons">
        <button class="number btn">7</button>
        <button class="number btn">8</button>
        <button class="number btn">9</button>
        <button class="operator btn">/</button>
      </div>
      <div class="buttons">
        <button class="number btn">4</button>
        <button class="number btn">5</button>
        <button class="number btn">6</button>
        <button class="operator btn">X</button>
      </div>
      <div class="buttons">
        <button class="number btn">1</button>
        <button class="number btn">2</button>
        <button class="number btn">3</button>
        <button class="operator btn">-</button>
      </div>
      <div class="buttons">
        <button class="decimal btn">.</button>
        <button class="number btn">0</button>
        <button class="equal btn">=</button>
        <button class="operator btn">+</button>
      </div>
    </div>
  </body>
</html>

let operator = '';
let previousValue = '';
let currentValue = '';

document.addEventListener("DOMContentLoaded", function(){
    //Store all components on html in JS 
    let clear = document.querySelector(".clear.btn");
    let equal = document.querySelector(".equal");
    let decimal = document.querySelector(".decimal");
    
    let numbers = document.querySelectorAll(".number");
    let operators = document.querySelectorAll(".operator");

    let previousScreen = document.querySelector(".previous");
    let currentScreen = document.querySelector(".current");

    numbers.forEach((number) => number.addEventListener("click", function(e){
        handleNumber(e.target.textContent)
        currentScreen.textContent = currentValue;
    }))

    operators.forEach((op) => op.addEventListener("click", function(e){
        handleOperator(e.target.textContent);
        previousScreen.textContent = previousValue + " " + operator;
        currentScreen.textContent = currentValue;
    }))

    clear.addEventListener("click", function(){
        previousValue= "";
        currentValue= "";
        operator="";
        previousScreen.textContent = currentValue;
        currentScreen.textContent = currentValue;
    })

    equal.addEventListener("click", function(){
        calculate();
        previousScreen.textContent= '';
        currentScreen.textConent = previousValue;
    })
})

function handleNumber(num){
    if(currentValue.length <=8){
        currentValue += num;
    }
    
}

function handleOperator(op){
    operator = op;
    previousValue = currentValue;
    currentValue= '';
}

function calculate(){
    previousValue = Number(previousValue);
    currentValue = Number(currentValue);

    if(operator === "+"){    
        previousValue += currentValue;
    } else if(operator === "-"){
        previousValue -= currentValue;
    } else if(operator === "X"){
        previousValue *= currentValue;
    }else{
        previousValue /= currentValue;
    }
    previousValue = roundNumber(previousValue);
    previousValue = previousValue.toString();
    currentValue = previousValue.toString();
}

function roundNumber(num){
    return Math.round(num * 1000) /1000;
}

Upvotes: 0

Views: 66

Answers (1)

SaSkY
SaSkY

Reputation: 1086

The bug is literally a typo:

The bug is the word Conent at the line 39 of script.js.

line:39: currentScreen.textConent = previousValue;

The fix is just replace the word Conent with Content.

line:39: currentScreen.textContent = previousValue;

After that you will be able to see the result.

Upvotes: 1

Related Questions