Javascript 計算器不顯示值？

Question

我做了一個簡單的 Javascript 計算器，但沒有輸出數字和運算符的值，我以為我已經正確鏈接了所有文件。 控制台中有一個錯誤說

app.js:41 未捕獲的類型錯誤：無法讀取 HTMLButtonElement 處的 reverseNumberFormat (app.js:41) 處未定義的屬性“替換”。 (app.js:69)

我認為我使用的三元運算符導致了問題，但我不知道為什么。 任何人都可以幫忙嗎？ 謝謝。

 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>

Answer 1

您缺少 getOutput 函數中的return語句。

function getOutput() {
  return document.getElementById('display').innerText;
}

您在添加數字時仍然會遇到問題，因為您使用的是英文單詞並嘗試將它們添加到數值中，這將導致 NaN。 不過，上面的代碼解決了您帖子中的問題。

 function getHistory() { //maipulate history return document.getElementById('previous-operand').innerText; } //alert(getHistory()); function printHistory(num) { document.getElementById('previous-operand').innerText = num; } function getOutput() { return 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>