Javascript Calculator: Help with resolving errors in Javascript Hi ! I need help resolving errors so this calculator ca

Post by **answerhappygod** » Sun May 15, 2022 9:57 am

Javascript Calculator: Help with resolving errors in
Javascript

Hi ! I need help resolving errors so this calculator can
work.
I am getting errors e.g.

* Ln 43: TypeError: Cannot read properties of null (reading
'addEventListener')
* Undefined

Here is my code:

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" />
<link rel="stylesheet" href="index.css" />
<script src="calculator.js"
defer="defer"></script>
<title>calculator</title>
</head>
<body>
<div class="container">
<div class="buttons">
<div class="display">
<div id="display" class="display-box">0</div>
</div>
<div class="num-button"id="num-button-7">7</div>
<div class="num-button"id="num-button-8">8</div>
<div class="num-button"id="num-button-9">9</div>
<div class="operator" id="operator-÷">÷</div>
<div class="num-button"id="num-button-4">4</div>
<div class="num-button"id="num-button-5">5</div>
<div class="num-button"id="num-button-6">6</div>
<div class="operator" id="operator-x">x</div>
<div class="num-button"id="num-button-1">1</div>
<div class="num-button"id="num-button-2">2</div>
<div class="num-button"id="num-button-3">3</div>
<div class="operator" id="operator--">-</div>
<div class="num-button"id="num-button-0">0</div>
<div class="operator" id="operator-.">.</div>
<div class="operator" id="operator-+">+</div>
<div class="total" id="equals">=</div>
</div>
</body>
</html>
CSS
body {
background: white;
font-family: "Montserrat", sans-serif;
}
.container {
background: grey;
width: 340px;
height: 550px;
border-radius: 0.5em;
margin: 0 auto;
padding: 32px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container .display {
width: 100%;
height: 150px;
grid-row: 1;
grid-column: 1/5;
background-color: limegreen;
}
.container .display p {
font-size: 40pt;
overflow-y: auto;
text-align: right;
}
.container .buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
background-color: grey;
}
.container .buttons .button,
// .container .buttons
.num-button .operator {
cursor: grab;
text-align: center;
width: 60px;
font-size: 20px;
height: 60px;
display: grid;
place-content: center;
border: 2px solid black;
background-color: white;
}
.button:hover {
color: limegreen;
}
.operator:hover {
color: limegreen;
}
#equals:hover {
color: limegreen;
}
.num-button:hover {
color: limegreen;
}
// .operator {
// color: white;
// font-weight: bold;
// }
.operator {
color: black;
font-size: 20px;
font-weight: bold;
border: 2px solid black;
background-color: white;
text-align: center;
line-height: 60px;
height: 60px;
}
#equals {
border: 2px solid black;
font-size: 20px;
font-weight: bold;
background-color: white;
text-align: center;
line-height: 60px;
height: 60px;
}
.num-button {
color: black;
font-size: 20px;
font-weight: bold;
border: 2px solid black;
background-color: white;
text-align: center;
line-height: 60px;
height: 60px;
}
Javascript
// Returning numbers
let currentNumber = "";
const inputNumber = (anyNumber) => {
currentNumber += anyNumber;
display();
};
// Display on calculator
const display = () => {
document.getElementById("display").innerText =
currentNumber;
};
// Numbers
let numButton = [
"num-button-0",
"num-button-1",
"num-button-2",
"num-button-3",
"num-button-4",
"num-button-5",
"num-button-6",
"num-button-7",
"num-button-8",
"num-button-9",
];
for (let i = 0; i < numButton.length; i++) {
let number = numButton;
let buttons = document.getElementById("num-button-" +
number);
buttons.addEventListener("click", () =>
inputNumber(this.innerText));
}
// Defines previous and current number with an operator
event
let previousNumber = "";
let currentOperator = "";
const inputOperator = (op) => {
currentOperator = op;
previousNumber = currentNumber;
currentNumber = "";
};
// Operator buttons
let operatorButton = ["÷", "x", "-", "+"];
for (let i = 0; i < operatorButton.length; i++) {
let operation = operatorButton;
let operator = document.getElementById("operator-" +
operator);
operator.addEventListener("click", () =>
inputOperator(this.innerText));
}
const equalsButton = () => {
if (currentOperator === "÷") {
currentNumber = Number(previousNumber) /
Number(currentNumber);
display();
}
if (currentOperator === "x") {
currentNumber = Number(currentNumber) *
Number(previousNumber);
display();
}
if (currentOperator === "-") {
currentNumber = Number(previousNumber) -
Number(currentNumber);
display();
}
if (currentOperator === "+") {
currentNumber = Number(currentNumber) +
Number(previousNumber);
display();
}
};
// Equals: Total
const equals = document.getElementById("equals");
equals.addEventListener("click", () => equalsButton());