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

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 >
      <div>
        <div >
        <div >
            <div ></div>
            <div ></div>
        </div>
        <button >C</button>
        </div>
   
      <div >
        <button >7</button>
        <button >8</button>
        <button >9</button>
        <button >/</button>
      </div>
      <div >
        <button >4</button>
        <button >5</button>
        <button >6</button>
        <button >X</button>
      </div>
      <div >
        <button >1</button>
        <button >2</button>
        <button >3</button>
        <button >-</button>
      </div>
      <div >
        <button >.</button>
        <button >0</button>
        <button >=</button>
        <button > </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;
}

CodePudding user response：

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.