KDSWE
Reputation: 5
Javascript Calculator, how do I clear the output when a new number is inputted?
I'm currently building a calculator project and I'm having a small issue. I'm able to get the output of the calculator (e.g., 2 x 2 = 4). However, if I input a new number afterwards, the number gets added to the string of the output. I would like to clear that output ONLY when a new number input is pressed (e.g., 2 x 2 = 4. I press 3, the currentDisplay will show as 43 instead of it just being "3"). Setting
currentNum = ""
after the output is created does fix this problem, however I wouldn't be able to use the output to chain operators if I did that (e.g., 5 x 2 = 10 +2 = 12)
Here is the full code:
let currentNum = "";
let prevNum = "";
let operator = "";
const numberButtons = document.querySelectorAll(".num-btns")
const operatorButtons = document.querySelectorAll(".operator")
const equal = document.querySelector(".equal");
const dot = document.querySelector(".dot");
const clearBtn = document.querySelector(".clear");
const deleteBtn = document.querySelector(".delete");
const currentDisplay = document.querySelector(".current-number");
const prevDisplay = document.querySelector(".previous-number");
//add, subtract, multiply, and divide functions
function addFn(num1, num2) {
return num1 + num2;
}
function subFn(num1, num2) {
return num1 - num2;
}
function multiFn(num1, num2) {
return num1 * num2;
}
function divFn(num1, num2) {
return num1 / num2;
}
//operator function
function operate (a, b, c) {
const num1 = parseFloat(a);
const num2 = parseFloat(b);
let output = 0;
try {
switch(c) {
case '+':
output = addFn(num1, num2);
break;
case 'x':
output = multiFn(num1, num2);
break;
case '-':
output = subFn(num1, num2);
break;
case '/':
if (num2 === 0) {
output = "ERROR"
} else {
output = divFn(num1, num2);
}
break;
}
}
catch(e) {
currentDisplay.textContent = ("There's an error: ", e)
};
currentDisplay.textContent = Math.round(output *100000) / 100000;
currentNum = output;
}
equal.addEventListener("click", (e) => {
if (currentNum != "" && prevNum != "") {
operate(prevNum, currentNum, operator);
}
prevNum = "";
});
//button inputs for numbers and operators
numberButtons.forEach(btn => {
btn.addEventListener("click", (e) => {
handleNumber(e.target.textContent);
});
});
function handleNumber(number) {
currentNum += number;
currentDisplay.textContent = currentNum;
}
operatorButtons.forEach((btn) => {
btn.addEventListener("click", (e) => {
handleOperator(e.target.textContent);
});
});
function handleOperator(op) {
if (currentNum != "") {
operator = op
prevNum = currentNum
prevDisplay.textContent = prevNum + " " + operator;
currentNum = ""
currentDisplay.textContent = "";
}
}
function addDot() {
if (!currentNum.includes(".")) {
currentNum += ".";
currentDisplay.textContent = currentNum;
}
}
dot.addEventListener("click", () => {
addDot();
})
//clear button
function reset() {
currentDisplay.textContent = "";
prevDisplay.textContent = "";
currentNum = "";
prevNum = "";
}
clearBtn.addEventListener("click", reset);
//delete button
function delNumber() {
currentDisplay.textContent = currentDisplay.textContent
.toString()
.slice(0, -1);
currentNum = currentDisplay.textContent;
}
deleteBtn.addEventListener("click", delNumber);
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="display">
<div class="previous-number">
</div>
<div class="current-number"></div>
</div>
<div class="btns">
<div>
<button class="clear">AC</button>
<button class="delete">DEL</button>
</div>
<div class="row1">
<div class="num-btns1">
<button class="num-btns">7</button>
<button class="num-btns">8</button>
<button class="num-btns">9</button>
<button class="operator">/</button>
</div>
<div class="row2">
<button class="num-btns">4</button>
<button class="num-btns">5</button>
<button class="num-btns">6</button>
<button class="operator">x</button>
</div>
<div class="row3">
<button class="num-btns">1</button>
<button class="num-btns">2</button>
<button class="num-btns">3</button>
<button class="operator">-</button>
</div>
<div class="row4">
<button class="dot">.</button>
<button class="num-btns">0</button>
<button class="equal">=</button>
<button class="operator">+</button>
</div>
</div>
</div>
</body>
<script src="./script.js"></script>
</html>
Upvotes: 0
Views: 966
Answers (2)
zeenath zeenath
Reputation: 1
Declaring a varible "calculated" initially set to false. and changed to true on evaluting the result ('=') .
**scrpit.js**
let input=document.getElementById('inputbox');
let btns=document.querySelectorAll('button');
let str="";
let arr=Array.from(btns);
var calculated=false;
arr.forEach((b) =>{
b.addEventListener('click', (e) =>{
if(e.target.innerHTML == '=') {
str=eval(str).toFixed(1);
input.value=str;
calculated=true;
}
else if(e.target.innerHTML == 'C'){
str= '';
input.value=str;
}
else if(e.target.innerHTML == 'DEL')
{
str=str.slice(0,-1);
input.value=str;
}
else if(e.target.innerHTML == '+/-'){
str=e.target.innerHTML;
if(str<0){
str=str* -1;
input.value=str;
}
else if(str >0){
str=Math.abs(str);
input.value=str;
}
}
else{
if(calculated == true){
str='';
input.value=str;
calculated=false;
}
str+=e.target.innerHTML;
input.value=str;
}
})
})
**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Simple Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<div class="container">
<input type="text" class="item1" id="inputbox" value="0"></input>
<button class="items btn" >7</button>
<button class="items btn">8</button>
<button class="items btn">9</button>
<button class="items btn operator">%</button>
<button class="del btn operator">DEL</button>
<button class="items btn">4</button>
<button class="items btn">5</button>
<button class="items btn">6</button>
<button class="items btn operator">*</button>
<button class="items btn operator">/</button>
<button class="items btn">1</button>
<button class="items btn">2</button>
<button class="items btn">3</button>
<button class="items btn operator">-</button>
<button class="equals btn">=</button>
<button class="items btn" id="clear">C</button>
<button class="items btn">0</button>
<button class="items btn operator">.</button>
<button class="items btn operator">+</button>
<script src="./script.js" type="text/javascript"></script>
</div>
</body>
</html>
**style.css**
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
h1{
text-align: center;
margin: 20px 15px 60px 15px;
font-weight: bolder;
}
.container{
border: 5px solid black;
display: grid;
grid-template-columns : repeat(5,1fr);
grid-template-rows: repeat(5,1fr);
row-gap: 12px;
column-gap: 12px;
width: 500px;
margin: auto;
padding: 30px;
background-color: rgb(173, 239, 239);
border-radius: 10px;
}
.item1{
grid-column-start: 1;
grid-column-end: 6;
border: 2px solid black;
padding: 15px;
margin:2px;
text-align:right;
font-weight: bolder;
background-color: rgb(214, 238, 238);
border-radius: 10px;
}
.item1:hover{
background-color: white;
}
.equals{
grid-column: 5;
grid-row: 4/span 2;
border: 2px solid black;
justify-self: center;
padding: 50px 15px;
margin: 5px;
font-weight: bolder;
background-color:darkblue;
color: white;
border-radius: 10px;
}
.equals:hover{
background-color: white;
color: blue;
}
.del {
border: 2px solid black;
justify-self: center;
padding: 15px;
margin: 5px;
font-weight: bolder;
background-color: rgb(214, 238, 238);
border-radius: 10px;
}
.items{
display: grid;
border: 2px solid black;
padding: 15px;
margin: 5px;
width:50px;
height: 60px;
font-weight:bolder;
align-self: center;
background-color: rgb(214, 238, 238);
color:darkblue;
border-radius: 10px;
}
#clear{
background-color: red;
color: white;
}
#clear:hover{
background-color: antiquewhite;
color: brown;
}
#operator{
color: white;
background-color: rgb(163, 160, 160);
}
#operator:hover{
background-color:rgb(223, 223, 165);
color:red;
}
.items:hover,.del:hover{
background-color:rgb(223, 223, 165);
color:white;
}
Upvotes: 0
Richard Henage
Reputation: 1808
When the = button is clicked, set a variable to remember that the next number input should clear the previous number. (Then remove this catch once an operator button is clicked).
let currentNum = "";
let prevNum = "";
let operator = "";
let clearOnNextNum = false;
const numberButtons = document.querySelectorAll(".num-btns")
const operatorButtons = document.querySelectorAll(".operator")
const equal = document.querySelector(".equal");
const dot = document.querySelector(".dot");
const clearBtn = document.querySelector(".clear");
const deleteBtn = document.querySelector(".delete");
const currentDisplay = document.querySelector(".current-number");
const prevDisplay = document.querySelector(".previous-number");
//add, subtract, multiply, and divide functions
function addFn(num1, num2) {
return num1 + num2;
}
function subFn(num1, num2) {
return num1 - num2;
}
function multiFn(num1, num2) {
return num1 * num2;
}
function divFn(num1, num2) {
return num1 / num2;
}
//operator function
function operate (a, b, c) {
const num1 = parseFloat(a);
const num2 = parseFloat(b);
let output = 0;
try {
switch(c) {
case '+':
output = addFn(num1, num2);
break;
case 'x':
output = multiFn(num1, num2);
break;
case '-':
output = subFn(num1, num2);
break;
case '/':
if (num2 === 0) {
output = "ERROR"
} else {
output = divFn(num1, num2);
}
break;
}
}
catch(e) {
currentDisplay.textContent = ("There's an error: ", e)
};
currentDisplay.textContent = Math.round(output *100000) / 100000;
currentNum = output;
clearOnNextNum = true;
}
equal.addEventListener("click", (e) => {
if (currentNum != "" && prevNum != "") {
operate(prevNum, currentNum, operator);
}
prevNum = "";
});
//button inputs for numbers and operators
numberButtons.forEach(btn => {
btn.addEventListener("click", (e) => {
handleNumber(e.target.textContent);
});
});
function handleNumber(number) {
if (clearOnNextNum) {
clearOnNextNum = false;
currentNum = "";
}
currentNum += number;
currentDisplay.textContent = currentNum;
}
operatorButtons.forEach((btn) => {
btn.addEventListener("click", (e) => {
handleOperator(e.target.textContent);
});
});
function handleOperator(op) {
clearOnNextNum = false;
if (currentNum != "") {
operator = op
prevNum = currentNum
prevDisplay.textContent = prevNum + " " + operator;
currentNum = ""
currentDisplay.textContent = "";
}
}
function addDot() {
clearOnNextNum = false;
if (!currentNum.includes(".")) {
currentNum += ".";
currentDisplay.textContent = currentNum;
}
}
dot.addEventListener("click", () => {
addDot();
})
//clear button
function reset() {
currentDisplay.textContent = "";
prevDisplay.textContent = "";
currentNum = "";
prevNum = "";
}
clearBtn.addEventListener("click", reset);
//delete button
function delNumber() {
currentDisplay.textContent = currentDisplay.textContent
.toString()
.slice(0, -1);
currentNum = currentDisplay.textContent;
}
deleteBtn.addEventListener("click", delNumber);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="display">
<div class="previous-number">
</div>
<div class="current-number"></div>
</div>
<div class="btns">
<div>
<button class="clear">AC</button>
<button class="delete">DEL</button>
</div>
<div class="row1">
<div class="num-btns1">
<button class="num-btns">7</button>
<button class="num-btns">8</button>
<button class="num-btns">9</button>
<button class="operator">/</button>
</div>
<div class="row2">
<button class="num-btns">4</button>
<button class="num-btns">5</button>
<button class="num-btns">6</button>
<button class="operator">x</button>
</div>
<div class="row3">
<button class="num-btns">1</button>
<button class="num-btns">2</button>
<button class="num-btns">3</button>
<button class="operator">-</button>
</div>
<div class="row4">
<button class="dot">.</button>
<button class="num-btns">0</button>
<button class="equal">=</button>
<button class="operator">+</button>
</div>
</div>
</div>
</body>
<script src="./script.js"></script>Upvotes: 1
Related Questions
- How can I clear the first number on the display entered in a calculator so that the second number does not get concatenated to the first one?
- Making All clear button work on a Calculator
- How to clear an input with javascript?
- JavaScript Calculator issue with clear button
- Clearing values in a Javascript/HTML calculator
- Javascript calculator simple clear feature not working
- Calculator clear button
- Javascript Calculator will not clear after answer is given
- JQuery Calculator: Calculate Input, Clear After
- reset the calculator input box for the next operation in js