When I run my code no problems populate in the console however, I cannot figure out why my equal operator is not working. I can press the numbers, operators, and equal button and it shows up on the screen but it will not calculate the problem. Can anyone help me figure out what is I am missing to get the function to work correctly?
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 num1 = ''
let num2 = ''
numberButtons.forEach(function(numberButton) { numberButton.addEventListener("click", function() { screen.textContent += numberButton.value; currentValue = parseInt(screen.innerText); })
})
function operate() { num1 = parseInt(num1); num2 = parseInt(num2); if (operators === '+') { num1 += num2; } else if (operators === '-') { num1 -= num2; } else if (operators === '*') { num1 *= num2; } else { num1 /= num2; }
}
operators.forEach(function(operators) { operators.addEventListener("click", function() { screen.textContent += operators.value; currentValue = (screen.innerText); })
})
equal.addEventListener("click", function() { screen.textContent += equal.value; currentValue = (screen.innerText); operate(operators, num1, num2)
})
clear.addEventListener('click', () => location.reload());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: 75px; 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;
}<!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> Calculator</div> <div> <br> <div value="screen"></div> <button 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="/"> ÷</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="*"> ×</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>1 Answer
You never assign the values to num1 and num2. It looks like your calculator is mainly printing to screen. This will allow you to take a shortcut and use eval to parse that expression. But eventually you do want to program some logic into your exercise.
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 num1 = ''
let num2 = ''
numberButtons.forEach(function(numberButton) { numberButton.addEventListener("click", function() { screen.textContent += numberButton.value; currentValue = parseInt(screen.innerText); })
})
function operate() { num1 = parseInt(num1); num2 = parseInt(num2); if (operators === '+') { num1 += num2; } else if (operators === '-') { num1 -= num2; } else if (operators === '*') { num1 *= num2; } else { num1 /= num2; }
}
operators.forEach(function(operators) { operators.addEventListener("click", function() { screen.textContent += operators.value; currentValue = (screen.innerText); })
})
equal.addEventListener("click", function() { /*screen.textContent += equal.value; currentValue = (screen.innerText); operate(operators, num1, num2) */ var x = eval("(" + screen.textContent + ")") screen.innerText = x;
})
clear.addEventListener('click', () => location.reload());html,
body { height: 100%; width: 100%;
}
div.calc { font-family: 'Courier New', monospace; color: #FB6F92; font-size: 40px; font-weight: bolder; margin-left: 125px; margin-top: 25px;
}
div.container { background: #e7e7e7; width: 500px; height: 555px; border-radius: 10px; border: 5px solid #FB6F92; margin-left: 50px; 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: 75px; 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;
}<!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> Calculator</div> <div> <br> <div value="screen"></div> <button 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="/"> ÷</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="*"> ×</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>
</body>
</html>
