javascript - 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>

标签： javascripthtml

Answer 1

您缺少returngetOutput 函数中的语句。

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>