For my very first coding project, I decided to create a calculator app. Despite the abundance of tutorials available online, I wanted to challenge myself by breaking down the problem into smaller steps on my own.
However, I've encountered an issue where each button press replaces the previous value with the new one, instead of combining the two values together (e.g., pressing "1" and then "2" should display "12"). I'm struggling to figure out how to program this functionality.
Any suggestions or ideas would be greatly appreciated!
Thank you!
https://codepen.io/tphelps5/pen/GRgBMMZ?editors=1010
JavaScript
let reset = document.getElementById("reset"),
output = document.getElementById("output"),
calcButtons = document.getElementById("calc_buttons");
calcButtons.addEventListener("click", printNum, false);
function printNum(e) {
if (e.target !== e.currentTarget) {
let clickedItem = e.target.value;
output.innerHTML = clickedItem;
}
e.stopPropagation();
}
HTML
<HTML>
<h1> My First JavaScript Calculator </h2>
<div id="calculator">
<div id="calc_buttons">
<span id="output"></span>
<button class="operate" id="reset" value=" ">C</button>
<button class="num" id="seven" value="7">7</button>
<button class="num" id="eight" value="8">8</button>
<button class="num" id="nine" value="9">9</button>
<button class="operate" id="divide" value="/">/</button>
<button class="num" id="four" value="4">4</button>
<button class="num" id="five" value="5">5</button>
<button class="num" id="six" value="6">6</button>
<button class="operate" id="multiply" value="*">*</button>
<button class="num" id="one" value="1">1</button>
<button class="num" id="two" value="2">2</button>
<button class="num" id="three" value="3">3</button>
<button class="operate" id="minus" value="-">-</button>
<button class="num" id="zero" value="0">0</button>
<button class="operate" id="decimal" value=".">.</button>
<button class="operate" id="equals" value="=">=</button>
<button class="operate" id="plus" value="+">+</button>
</div>
</HTML>