Javascript Calculator is returning undefined

Question

I have not been able to figure out why my calculator is returning undefined. I have it set up to return the result but I can't figure out why it doesn't return the actual calculation. I have console.log() my numbers and operator and they will show up but it never calculates. On the screen it returns undefined. Thanks so much to anyone that helps!

JS Code

const screen =document.querySelector('.screen')
const clear =document.querySelector('.clear')
const numberButtons =document.querySelectorAll('.numbers')
const operators =document.querySelectorAll('.operators') 
const equal =document.querySelector('.equal')

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

let result = '';


//code for numbers to show values on screen
numberButtons.forEach(function(numberButton){
  numberButton.addEventListener("click",function(){
    
      screen.textContent+=numberButton.value;
      currentValue=parseInt(screen.innerText);
    
    })
})
// code for +-/*
 operators.forEach(function(operators){
   operators.addEventListener("click",function(){
     screen.textContent+=operators.value;
     currentValue=(screen.innerText);  
   })
 })
//function for math equations
function calculate(operators,previousValue,currentValue) {

console.log(previousValue);
console.log(operators);
console.log(currentValue);

     
  

    previousValue = parseInt(previousValue)
    currentValue = parseInt(currentValue)

 
   if (operators == '+') {
        result = previousValue += currentValue
    } else if (operators == '-') {
        result = previousValue -= currentValue
    } else if (operators == '*') {
        result = previousValue *= currentValue
    } else {
        result = previousValue /= currentValue
    }

    screen.textContent += calculate.value
    currentValue = (screen.innerText)
    return result ;
          
}

//function to compute once equal is clicked
equal.addEventListener("click", button => {

  screen.textContent+=equal.value;
  currentValue=(screen.innerText);
  if (previousValue != "" && currentValue != "" && operators != ""){
  return result;
  }
 
calculate(operators,previousValue,currentValue)

})

clear.addEventListener('click',() => location.reload());

CSS

html, body {
  height: 100%;
  width: 100%;
}
div.calc{
  font-family: 'Courier New', monospace;
  color: #FB6F92;
  font-size: 40px ;
  font-weight: bolder;
  margin-left: 625px;
  margin-top: 25px;
}
div.container{
 background:#e7e7e7;
  width: 500px;
  height: 555px;
  border-radius: 10px;
  border: 5px solid #FB6F92; 
  margin-left: 500px;
  margin-top: 25px;
  box-shadow: 10px 10px 10px;

}
div.screen{
  border: 5px solid #FB6F92; 
  color: black;
  background: #f8f8ff;
  width: 445px;
  height: 100px;
  border-radius: 10px;
  margin-left: 20px;
  font-size: 30px;
  text-align: right;
  font-weight: bold;
  font-family: 'Courier New', monospace;

}
button.clear{
  width: 450px;
  height: 50px;
  background:#FFCCF9;
  color:black;
  border-radius: 5px;
  margin-left: 22px;
  margin-top: 6px;
 
}

button.clear:hover{
  background:#Ff9cee;
}
button.numbers{
  width: 75px;
  height: 75px;
  background: pink;
  color:white;
  border-radius: 5px;
  margin-left: 35px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 20px;
}
button.numbers:hover{
  background: #FB6F92;
  }
button.operators{
  width: 75px;
  height: 75px;
  background: #A4E7DF;
  color:black;
  border-radius: 5px;
  margin-left: 35px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 20px;
}
button.operators:hover{
  background: #3bc6b6;
  #64d4c7
}
button.equal{
  width: 190px;
  height: 75px;
  background: #D1B2EA;
  color:black;
  border-radius: 5px;
  margin-left: 35px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 20px;
  
}
button.equal:hover{
  background:#b07cda;
}
footer{
  font-family: 'Courier New', monospace;
  color: #FB6F92;
  font-size: 36px ;
  font-weight: bolder;
  margin-left: 510px;
  margin-top: 20px;
 
}
html, body {
  height: 100%;
  width: 100%;
}

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Calculator TOP Project</title>
  <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body style = 'background-color :#a0ddfb;'>
   <div class = "calc">  Calculator</div> 
<div class = "container">

  <br>
  <div class="screen" value = "screen"></div>
 
  <button class = "clear" onclick="clear();" >Clear</button>
<br>
  <button class = 'numbers'  value="7" > 7</button>
  <button class = 'numbers' value="8">8</button>
  <button class = 'numbers' value="9">9</button>
  <button class = 'operators' value="÷"> &#247;</button>
  <br>
  <button class = 'numbers'  value="4">4</button>
  <button class = 'numbers'value="5">5</button>
  <button class = 'numbers' value="6">6</button>
  <button class = 'operators' value="*" >   &#215;</button>
  <br>
  <button class = 'numbers' value="1"  >1</button>
  <button class = 'numbers'  value="2" >2</button>
  <button class = 'numbers'  value="3" >3</button>
  <button class = 'operators' value = "-" >-</button>
  <br>
<!--   <button class = 'numbers' value=".">.</button> -->
   <button class = 'numbers' value ="0" >0</button>
    <button class = 'equal' value="=" >=</button>
   <button class = 'operators' value = "+" >+</button>
  
</div>
  
  
 
  
  
</div>
  









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

</body>
</html>

This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Nov 02 '22 at 16:43

score 0 · Answer 1 · answered Nov 02 '22 at 16:57

Looks like you have a bad line.

Observe your js file on this line:

    screen.textContent += calculate.value

calculate is the name of your function. It has no attribute value.

You probably want to replace calculate.value to result like so:

    screen.textContent += result

Also you have some errors above that:

    previousValue = parseInt(previousValue)
    currentValue = parseInt(currentValue)

parseInt of an empty String will give you a a value of NaN (Not a number).

You also have a handful of logic bugs that you have to fix.

The undefined bug is just 1 bug that you have to fix.

Javascript Calculator is returning undefined

1 Answers1