This is a test document I made specifically for this question. I am building a JavaScript calculator and I am one problem away from finishing it.
I have two situations. When I press the equals button and the bottom text is:
empty/NaN, I need the function to return.
0, I want the function to compute.
When I use the (!bottomtext) operator, it doesn't compute when the zero is at the bottom.
Which operator should I use to disable when it's NaN but work when it's zero ("it" referring to bottomtext)?
Here's my code, keeping in mind that this document was made specifically for this question:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script>
function displayNum(x) {
document.getElementById('bottom').innerHTML += x;
}
function chooseOperation(x) {
if (document.getElementById('top') !== '') {
compute();
}
document.getElementById('operation').innerHTML = x;
transferText();
}
function clearNum2() {
document.getElementById('bottom').innerHTML = "";
}
function transferText() {
if (document.getElementById('bottom').innerHTML !== '') {
document.getElementById('top').innerHTML = document.getElementById('bottom').innerHTML;
} else {
return;
}
clearNum2();
}
function compute() {
var result;
var uppertext = parseInt(document.getElementById('top').innerHTML);
var operation = document.getElementById('operation').innerHTML;
var bottomtext = parseInt(document.getElementById('bottom').innerHTML);
console.log("uppertext =", uppertext, "|", typeof (uppertext))
console.log("operation =", operation, "|", typeof (operation))
console.log("bottomtext =", bottomtext, "|", typeof (bottomtext))
console.log("equation is", uppertext, operation, bottomtext)
// my problem is here
if (bottomtext = NaN) {
return;
} else {
switch (operation) {
case ('+'):
result = uppertext + bottomtext;
break;
case ('-'):
result = uppertext - bottomtext;
break;
case ('*'):
result = uppertext * bottomtext;
break;
case ('/'):
result = uppertext / bottomtext;
break;
default:
return
}
document.getElementById('result').innerHTML = result;
console.log("result =", result, "|", typeof (result))
}
}
</script>
</head>
<body>
<h1>Refresh to Reset</h1>
<h2>Open console</h2>
<h2>Clear console after pressing the multiplication button for clearer results</h2>
<h2>Multiply 1 by 0 and press equals</h2>
<hr>
<h3>Top</h3>
<div id="top"></div>
<h3>Operation</h3>
<div id="operation"></div>
<h3>Bottom</h3>
<div id="bottom"></div>
<h3>Result</h3>
<div id="result"></div>
<hr>
<button onclick="displayNum(1)">1</button>
<button onclick="displayNum(0)">0</button>
<button onclick="chooseOperation('*')">Multiply</button>
<button onclick="compute()">=</button>
</body>
</html>
