So I'm a beginner to JS and HTML. I'm making a simple calculator that is stack based and has 4 operations [*, +, -, /] To use the calculator, you push the buttons like so: 7 push 8 push * and when the * is clicked, the final answer 56 is shown. So my calculator works fine for single digit numbers and operations but when I try to enter a number like 56 i start by hitting the button '5' and then i hit '6' but it doesn't show up in the display field where the number/answer is supposed to be outputted. I'm assuming this is an issue with concatenating but I also have no idea what more I could try fixing so that the second number shows up in the display and I can operate with a two digit number. Can someone please provide some solutions on how I can fix this? Below is my JS and HTML code:
//declare stack:
let stack = [];
//initialize displayval to 0
let displayVal = '0';
let decimalFlag = false;
//flag for starting number
// //"The JavaScript input text property is used to set or return the value of a text input field":
const input = document.getElementById('result');
//function to display num in display element:
// function displayNum(val) {
// if (input.value === "0") {
// input.value = val;
// } else {
// input.value += val;
// }
// }
function displayNum(val) {
if (input.value === '') {
input.value = val;
} else {
input.value += val;
}
}
// //function to display num in display element:
// function displayNum(val) {
// //let display = document.getElementById("result");
// if (input.innerHTML === "0") {
// input.innerHTML = val;
// } else {
// input.innerHTML += val;
// }
// }
//Clears the display and sets to 0:
function clearScreen() {
document.getElementById('result').value = '0';
//clears stack:
stack = [];
displayVal = '0';
//set start num to true for all operations
}
// displays results after operations:
function display(val) {
//setting display to 0 :
if (val === 'Push') {
stack.push(displayVal);
//displayVal = "0";
decimalFlag = false;
}
//else operations:
else if (val === '+' || val === '-' || val === '*' || val === '/') {
//popping nums off stack:
let num2 = stack.pop();
let num1 = stack.pop();
//answer:
let result;
//converts strings to numbers to operate on them:
//addition:
if (val === '+') {
result = Number(num1) + Number(num2);
//console.log(result);
}
//subtraction:
else if (val === '-') {
result = Number(num1) - Number(num2);
}
//mult:
else if (val === '*') {
result = Number(num1) * Number(num2);
}
//division:
else if (val === '/') {
result = Number(num1) / Number(num2);
} else {
if (displayVal === '0') {
displayVal = val;
} else {
displayVal += val;
}
}
//push result to stack and display
stack.push(result);
//testing output:
console.log(result);
displayVal = result;
decimalFlag = false;
}
//negates a number:
else if (val === '+/-') {
displayVal = displayVal[0] === '-' ? displayVal.slice(1) : '-' + displayVal;
}
//else, val is shown on the display
else {
displayVal = val;
}
document.getElementById('result').value = displayVal;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<!--create a table element to organize calc-->
<table>
<!-- Create a row for the display -->
<tr>
<!--settining initial display value to 0-->
<td colspan="4"><input class="display" type="number" id="result" disabled value = "0"/></td>
<!--clear button will clear everything on display-->
<!-- <td><input type="button" value="C" onclick="clr()" /> </td> -->
</tr>
<!-- Create the first row of buttons -->
<tr>
<td><input type="button" value="1" onclick="display('1')" class="btn" /></td>
<td><input type="button" value="2" onclick="display('2')" class="btn" /></td>
<td><input type="button" value="3" onclick="display('3')" class="btn" /></td>
<td><input type="button" value="+" onclick="display('+')"/></td>
</tr>
<!-- Create the second row of buttons -->
<tr>
<td><input type="button" value="4" onclick="display('4')" class="btn"/></td>
<td><input type="button" value="5" onclick="display('5')" class="btn"/></td>
<td><input type="button" value="6" onclick="display('6')" class="btn"/></td>
<td><input type="button" value="-" onclick="display('-')"/></td>
</tr>
<!-- Create the third row of buttons -->
<tr>
<td><input type="button" value="7" onclick="display('7')" class="btn" /></td>
<td><input type="button" value="8" onclick="display('8')" class="btn" /></td>
<td><input type="button" value="9" onclick="display('9')" class="btn" /></td>
<td><input type="button" value="*" onclick="display('*')"/></td>
</tr>
<!-- Create the fourth row of buttons -->
<tr>
<td><input type="button" value="0" onclick="display('0')" class="btn" /></td>
<!--Clears screen and sets display val to 0-->
<td><input type="button" value="C" onclick="clearScreen('C')" id="C"/> </td>
<td><input type="button" value="." onclick="display('.')"/></td> <!--have to implement still-->
<td><input type="button" value="/" onclick="display('/')"/></td>
</tr>
<!-- Create the fifth row of buttons -->
<tr>
<td><input type="button" value="+/-" onclick="display('+/-')"/></td>
<td colspan="2"></td>
<td><input type="button" value="Push" onclick="display('Push')"/></td>
</tr>
</table> <!--end of table-->
<!-- script links to JS code-->
<script src="script.js"></script>
</body>
</html>I tried a bunch of modifications to the displayNum function because i'm pretty sure that's where the issue is coming from. As u can see, I commented out my different approaches and there where plenty more but those are just 2
Inside the display function, you can update the following code:
//else, val is shown on the display
else {
// displayVal = val; // <= BEFORE
displayVal = input.value === "0" ? val : input.value + val; // <= AFTER
}
There's some more refactoring that you must do, in order for the arithmetic operations to work, but that's the next step I guess. :)