I am currently trying to create a very rudimentary calculator with JS, HTML and CSS. I don't think there is any issue with the CSS so I won't include it for now.
I have a function setOperand() that is called upon pressing one of the operation buttons on my calculator. It adds the respective operator to the "display"-div's innerHTML and (for testing purposes) logs it to the console. That part works as intended. At the end it returns the operator as a variable called operand.
Now, if the '=' button is pressed, the function equalsButton() is called which logs the operand variable once again and here I noticed it logs it's value as 'undefined'. I find this very strange and have tried solving it for many hours today, trying different approaches and looking for possible mistakes I could've made. I had operand defined as 'undefined' outside a function in order to initialize it but removing that code didn't solve the problem.
I am trying to have equalsButton() split the display content into two numbers, by using the operator as the "splitter".
Also, could I just evaluate the innerHTML as is? Since the two numbers and the operator are displayed like an equation already.
Thanks in advance for all responses!
const numberButton = document.querySelectorAll("[data-number]");
const operandButton = document.querySelectorAll("[data-operand]");
const equals = document.querySelector("[data-equals]");
const allClear = document.querySelector("[data-all-clear]");
const deleteNum = document.querySelector("[data-del]");
const display = document.getElementById("display");
var num1 = 0;
var num2 = 0;
//var operand = undefined;
window.onload = function() {
alert("page loaded");
};
function buttonPress(display, button) {
let currentContent = display.innerHTML;
display.innerHTML = currentContent button;
}
function setOperand(display, operator) {
currentContent = display.innerHTML;
display.innerHTML = currentContent operator;
var operand = display.innerHTML.slice(-1);
console.log(operand); // operator
return operand;
}
function equalsButton(display, operand) {
console.log(operand); // for some reason operand here is 'undefined'. Fix?
splitNum = display.innerText.split(String(operand));
num1 = splitNum[0];
num2 = splitNum[1];
console.log(num1); // 3 2 in my test
console.log(num2); // undefined
return num1, num2;
}
function calculate(display, operand, num1, num2) {
if (operand == " ") {
let result = num1 num2;
} else if (operand == "-") {
let result = num1 - num2;
} else if (operand == "*") {
let result = num1 * num2;
} else if (operand == "/") {
let result = num1 / num2;
}
display.innerHTML = result;
}
function del(display) {
display.innerHTML = display.innerHTML.slice(0, -1);
return display;
}
function allclear(display, num1, num2, operand) {
display.innerHTML = "";
var operand = undefined;
var num1 = 0;
var num2 = 0;
return num1, num2, operand;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="vie wport" content="width=device-width, initial-scale=1.0" />
<title>Online Calculator</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="display" ></div>
<div >
<button onclick="allclear(display, num1, num2, operand)" >
AC
</button>
<button onclick="del(display)" >DEL</button>
<button onclick="equalsButton(display)" >=</button>
<button onclick="buttonPress(display, 1)" >1</button>
<button onclick="buttonPress(display, 2)" >2</button>
<button onclick="buttonPress(display, 3)" >3</button>
<button onclick="setOperand(display, ' ')" >
</button>
<button onclick="buttonPress(display, 4)" >4</button>
<button onclick="buttonPress(display, 5)" >5</button>
<button onclick="buttonPress(display, 6)" >6</button>
<button onclick="buttonPress(display, 7)" >7</button>
<button onclick="buttonPress(display, 8)" >8</button>
<button onclick="buttonPress(display, 9)" >9</button>
<button onclick="setOperand(display, '-')" >
-
</button>
<button onclick="buttonPress(display, button)" >.</button>
<button onclick="buttonPress(display, button)" >0</button>
<button onclick="setOperand(display, '*')" >*</button>
<button onclick="setOperand(display, '/')" >/</button>
</div>
<script src="calculator.js" defer></script>
</body>
</html>The project is WIP and some code outside of the 2 functions might be redundant.
CodePudding user response：
I Tried Making it lets complex;
const numberButton = document.querySelectorAll("[data-number]");
const operandButton = document.querySelectorAll("[data-operand]");
const equals = document.querySelector("[data-equals]");
const allClear = document.querySelector("[data-all-clear]");
const deleteNum = document.querySelector("[data-del]");
const display = document.getElementById("display");
var num1 = 0;
var num2 = 0;
//var operand = undefined;
window.onload = function () {
alert("page loaded");
};
function buttonPress(display, button) {
let currentContent = display.innerHTML;
display.innerHTML = currentContent button;
}
function setOperand(display, operator) {
currentContent = display.innerHTML;
display.innerHTML = currentContent operator;
var operand = display.innerHTML.slice(-1);
console.log(operand); // operator
return operand;
}
function equalsButton(display) {
const innerText = display.innerText;
let operand = innerText.includes(' ') ? ' ' : innerText.includes('-') ? '-' : innerText.includes('/') ? '/':'*'
console.log(operand); // for some reason operand here is 'undefined'. Fix?
splitNum = display.innerText.split(operand);
num1 = splitNum[0];
num2 = splitNum[1];
console.log(num1); // 3 2 in my test
console.log(num2); // undefined
return num1, num2;
}
function calculate(display, operand, num1, num2) {
if (operand == " ") {
let result = num1 num2;
} else if (operand == "-") {
let result = num1 - num2;
} else if (operand == "*") {
let result = num1 * num2;
} else if (operand == "/") {
let result = num1 / num2;
}
display.innerHTML = result;
}
function del(display) {
display.innerHTML = display.innerHTML.slice(0, -1);
return display;
}
function allclear(display, num1, num2, operand) {
display.innerHTML = "";
var operand = undefined;
var num1 = 0;
var num2 = 0;
return num1, num2, operand;
}<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="vie wport" content="width=device-width, initial-scale=1.0" />
<title>Online Calculator</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="display" ></div>
<div >
<button onclick="allclear(display, num1, num2, operand)" >
AC
</button>
<button onclick="del(display)" >DEL</button>
<button onclick="equalsButton(display)" >=</button>
<button onclick="buttonPress(display, 1)" >1</button>
<button onclick="buttonPress(display, 2)" >2</button>
<button onclick="buttonPress(display, 3)" >3</button>
<button onclick="setOperand(display, ' ')" >
</button>
<button onclick="buttonPress(display, 4)" >4</button>
<button onclick="buttonPress(display, 5)" >5</button>
<button onclick="buttonPress(display, 6)" >6</button>
<button onclick="buttonPress(display, 7)" >7</button>
<button onclick="buttonPress(display, 8)" >8</button>
<button onclick="buttonPress(display, 9)" >9</button>
<button onclick="setOperand(display, '-')" >
-
</button>
<button onclick="buttonPress(display, button)" >.</button>
<button onclick="buttonPress(display, button)" >0</button>
<button onclick="setOperand(display, '*')" >*</button>
<button onclick="setOperand(display, '/')" >/</button>
</div>
<script src="calculator.js" defer></script>
</body>
</html>CodePudding user response：
I pointed out a few bugs. I describe them with "//*"-comments so you can search with ctrl f and put the corresponding solution below in a "//="-comment that you can copy and replace the line below with it.
const numberButton = document.querySelectorAll("[data-number]");
const operandButton = document.querySelectorAll("[data-operand]");
const equals = document.querySelector("[data-equals]");
const allClear = document.querySelector("[data-all-clear]");
const deleteNum = document.querySelector("[data-del]");
const display = document.getElementById("display");
var num1 = 0;
var num2 = 0;
//* initialize operand variable
//=var operand;
//var operand = undefined;
window.onload = function () {
alert("page loaded");
};
function buttonPress(display, button) {
let currentContent = display.innerHTML;
display.innerHTML = currentContent button;
}
function setOperand(display, operator) {
//* dont forget to initialize constant currentContent
//=const currentContent = display.innerHTML;
currentContent = display.innerHTML;
display.innerHTML = currentContent operator;
var operand = display.innerHTML.slice(-1);
console.log(operand); // operator
return operand;
}
//* omit parameter operand
//=function equalsButton(display) {
function equalsButton(display, operand) {
console.log(operand); // for some reason operand here is 'undefined'. Fix?
//* dont forget to initialize constant currentContent
//=const splitNum = display.innerText.split(String(operand));
splitNum = display.innerText.split(String(operand));
num1 = splitNum[0];
num2 = splitNum[1];
console.log(num1); // 3 2 in my test
console.log(num2); // undefined
return num1, num2;
}
function calculate(display, operand, num1, num2) {
//* declare variable result before the if's blocks.
//=let result;
if (operand == " ") {
//* omit the let key. since you would declare a new variable that only exists in the surrounding curly brackets
//=result = num1 num2;
let result = num1 num2;
} else if (operand == "-") {
//=result = num1 num2;
let result = num1 - num2;
} else if (operand == "*") {
//=result = num1 num2;
let result = num1 * num2;
} else if (operand == "/") {
//=result = num1 num2;
let result = num1 / num2;
}
display.innerHTML = result;
}
function del(display) {
display.innerHTML = display.innerHTML.slice(0, -1);
return display;
}
function allclear(display, num1, num2, operand) {
display.innerHTML = "";
var operand = undefined;
var num1 = 0;
var num2 = 0;
return num1, num2, operand;
}