I made a simple Javascript calculator but values of the numbers and the operators aren't being outputted, I thought I had linked all the files properly. There is an error in the console that says
app.js:41 Uncaught TypeError: Cannot read property 'replace' of undefined at reverseNumberFormat (app.js:41) at HTMLButtonElement. (app.js:69)
I think that the ternary operator I used is causing problems but I don't know why. Can anyone help? Thanks.
function getHistory() {
//maipulate history
return document.getElementById('previous-operand').innerText;
}
//alert(getHistory());
function printHistory(num) {
document.getElementById('previous-operand').innerText = num;
}
function getOutput() {
document.getElementById('display').innerText;
}
function printOutput(num) {
if (num == "") {
document.getElementById('display').innerText = num;
} else {
// ..convert to comma seperated value
document.getElementById('display').innerText = getFormattedNumber(num);
}
}
function getFormattedNumber(num) {
if (num == "-") {
//if input is minus sign return emptpy value
return "";
}
var n = Number(num);
var value = n.toLocaleString("en");
return value;
}
//printOutput("98586627")
///replace comma to empty charachter output values
function reverseNumberFormat(num) {
return Number(num.replace(/,/g, ''));
}
var operator = document.getElementsByClassName("operator");
for (var i = 0; i < operator.length; i++) {
operator[i].addEventListener('click', function() {
if (this.id == "clear") {
printHistory("");
printOutput("");
} else if (this.id == "backspace") {
var output = reverseNumberFormat(getOutput()).toString();
if (output) { //if output has a value
output = output.substr(0, output.length - 1);
printOutput(output);
}
} else {
var output = getOutput();
var history = getHistory();
if (output == "" && history != "") {
if (isNaN(history[history.length - 1])) {
history = history.substr(0, history.length - 1);
}
}
if (output != "" || history != "") {
output = output == "" ?
output : reverseNumberFormat(output);
history = history + output;
if (this.id == "=") {
var result = eval(history);
printOutput(result);
printHistory("");
} else {
history = history.this.id;
printHistory(history);
printOutput("");
}
}
}
});
}
var number = document.getElementsByClassName("number");
for (var i = 0; i < number.length; i++) {
number[i].addEventListener('click', function() {
//get output commas removed
var output = reverseNumberFormat(getOutput());
//
if (output != NaN) { //if output is a number
output = output + this.id;
printOutput(output);
}
});
}
<div id="calculator-grid" class="calculator-grid">
<div class="output">
<div id="previous-operand"></div>
<div id="display"></div>
</div>
<button id="clear" class="operator">AC</button>
<button id="del" class="operator">DEL</button>
<button id="divide" class="operator">÷</button>
<button id="one" class="number">1</button>
<button id="two" class="number">2</button>
<button id="three" class="number">3</button>
<button id="multiply" class="operator">*</button>
<button id="four" class="number">4</button>
<button id="five" class="number">5</button>
<button id="six" class="number">6</button>
<button id="add" class="operator">+</button>
<button id="seven" class="number">7</button>
<button id="eight" class="number">8</button>
<button id="nine" class="number">9</button>
<button id="subtract" class="operator">-</button>
<button id="decimal" class="operator">.</button>
<button id="zero" class="number">0</button>
<button id="equals" class="span-two operator">=</button>
</div>
output!=NaNinstead use!Number.isNaN(output)