/    Sign up×
Community /Pin to ProfileBookmark

Help with calculator

Hello, I am very new to JavaScript and I am confused why my code is not working. I am trying to build a basic calculator but none of the buttons are working. I tried looking at the console in devtools but no errors showed. Below is my JavaScript and HTML:

//creates an object to keep track of values
const Calculator = {
//this displays a 0 on the screen
Display_Value: ‘0’,
//this will hold the first operand for any expressions, we set it to null for now
First_Operand: null,
//this checks whether or not the second operand has been input
Wait_Second_Operand: false,
//this will hold the operator, we set it to null for now
operator: null,
} ;

//this modifies values each time a button is clicked
function Input_Digit(digit) {
const { Display_Value, Wait_Second_Operand } = Calculator
//we are checking to see if Wait_Second_Operand is true and set
//Display_Value to the key that was clicked
if (Wait_Second_Operand === true) {
Calculator.Display_Value = digit;
Calculator.Wait_Second_Operand = false;
} else {
//this overwrites Display_Value if the current value is 0
//otherwises it adds onto it
Calculator.Display_Value = Display_Value === ‘0’ ? digit : Display_Value + digit;
}
}
//this section handles decimal points
function Input_Decimal(dot) {
//this ensures that accidental clicking of the decimal point
//doesnt cause bugs in your operation
if (Calculator.Wait_Second_Operand === true) return;
//we are saying that is the Display_Value does not contain a decimal point
//we want to add a decimal point
Calculator.Display_Value += dot;
}
//this section handles operators
function Handle_Operator(Next_Operator) {
const { First_Operand, Display_Value, operator} = Calculator
//when an operator key is pressed, we convert the current number
// displayed on the screen to a number and then store the result in
// Calculator.First_Operand if it doesnt already exist
const Value_of_Input = parseFloat(Display_Value);
//checks if an operator already exists and if Wait_Second_Operand is true
// then updates the operator and exits from the function
if (operator && Calculator.Wait_Second_Operand) {
Calculator.operator = Next_Operator;
return;
}
if (First_Operand == null) {
Calculator.First_Operand = Value_of_Input;
} else if (operator) { //checks if an operator already exists
const Value_Now = First_Operand || 0;
//if operator already exists, property lookup is performed for the operator
// in the Perform_Calculator object and the function that matches the
// operator is executed
const result= Perform_Calculation[operator] (Value_Now, Value_of_Input);

Calculator.Display_Value = String(result);
Calculator.First_Operand = result;
}
Calculator.Wait_Second_Operand = true;
Calculator.operator = Next_Operator;

}
const Perform_Calculation = {
‘/’: (First_Operand, Second_Operand) => First_Operand / Second_Operand,
‘*’: (First_Operand, Second_Operand) => First_Operand * Second_Operand,
‘+’: (First_Operand, Second_Operand) => First_Operand + Second_Operand,
‘-‘: (First_Operand, Second_Operand) => First_Operand – Second_Operand,
‘=’: (First_Operand, Second_Operand) => Second_Operand
}
function Calculator_Reset() {
Calculator.Display_Value = ‘0’;
Calculator.First_Operand = null;
Calculator.Wait_Second_Operand = false;
Calculator.operator = null;
}
//this function updates the screen with the contents of Display_Value
function Update_Display() {
const display = document.querySelector(‘.calculator-screen’);
display_value = Calculator.Display_Value;
}
Update_Display();
//this section monitors button clicks
const keys = document.querySelector(‘.calculator-keys’);
keys.addEventListener(‘click’, (event) => {
//the target variable is an object that represents the element
//that was clicked
const { target } = event;
//if the element that was clicked on is not a button, exit the function
if (!target.matches(‘button’)) {
return;
}
if (target.classList.contains(‘operator’)) {
Handle_Operator(target.value);
Update_Display();
return;
}
if (target.classList.contains(‘decimal’)) {
Input_Decimal(target.value);
Update_Display();
return;
}
//ensures that AC clears the numbers from the Calculator
if (target.classList.contains(‘all-clear’)) {
Calculator_Reset();
Update_Display();
return;
}
Input_Digit(target.value);
Update_Display();
})
HTML:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Calculator</title>
<meta name=”description” content=”A basic HTML, CSS and JavaScript Calculator”>
<meta name=”author” content=”Stephanie”>
<link rel=”stylesheet” href=”CSS/Calculator_CSS.css”>
</head>
<body>
<div class=”calculator”>
<input type=”text” class=”calculator-screen” value=”0″ disabled />
<div class=”calculator-keys”>

<button type=”button” class=”operator” value=”+”>+</button>
<button type=”button” class=”operator” value=”-“>-</button>
<button type=”button” class=”operator” value=”*”>&times;</button>
<button type=”button” class=”operator” value=”/”>&divide;</button>

<button type=”button” value=”7″>7</button>
<button type=”button” value=”8″>8</button>
<button type=”button” value=”9″>9</button>

<button type=”button” value=”4″>4</button>
<button type=”button” value=”5″>5</button>
<button type=”button” value=”6″>6</button>

<button type=”button” value=”1″>1</button>
<button type=”button” value=”2″>2</button>
<button type=”button” value=”3″>3</button>

<button type=”button” value=”0″>0</button>
<button type=”button” class=”decimal function” value=”.”>.</button>
<button type=”button” class=”all-clear function” value=”all-clear”>AC</button>

<button type=”button” class=”equal-sign operator” value=”=”>=</button>

</div>
</div>

<script src= “JavaScript/Calculator_JavaScript.js”></script>

</body>

</html>

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@KeverMar 27.2020 — display_value = Calculator.Display_Value;
should be
display.value = Calculator.Display_Value;
Copy linkTweet thisAlerts:
@sdawncauthorMar 27.2020 — @Kever#1616684 Thank you so much!! That worked
×

Success!

Help @sdawnc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...