计算器问题需要解决

Question

我需要将我在屏幕上点击的数字限制为 10 位数字。现在我可以点击直到那里显示 NAN。我是初学者所以请帮助我。 +/- 按钮也有问题，所以如果您知道如何让它工作，我将不胜感激。另外，如果你能帮助我解决当我除以零时出现的无穷大问题，我不知道如何解决。

这是我到目前为止的代码。

function getHistory() {
  return document.getElementById("history-value").innerText;
}

function printHistory(num) {
  document.getElementById("history-value").innerText = num;
}

function getOutput() {
  return document.getElementById("output-value").innerText;
}

function printOutput(num) {
  if (num == "") {
    document.getElementById("output-value").innerText = num;
  } else {
    document.getElementById("output-value").innerText = getFormattedNumber(num);
  }
}

function getFormattedNumber(num) {
  var n = Number(num);
  var value = n.toLocaleString("en");
  return value;
}

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) {
        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() {
    var output = reverseNumberFormat(getOutput());
    if (output != NaN) {
      output = output + this.id;
      printOutput(output);
      dot = false;
    }
  });
}

body {
  background-color: black;
}

#kalkulacka {
  width: 320px;
  height: 480px;
  background-color: white;
  margin: auto;
  top: 20px;
  position: center;
  border-radius: 5px;
}

#vysledek {
  height: 120px;
}

#historie {
  text-align: right;
  height: 20px;
  margin: 0 20px;
  padding-top: 20px;
  font-size: 16px;
  color: black;
}

#output {
  text-align: right;
  height: 60px;
  margin: 10px 20px;
  font-size: 30px;
}

#klavesnice {
  height: 400px;
}

.operator,
.number,
.negate,
.dot {
  width: 50px;
  height: 44px;
  margin: 14px;
  float: left;
  border-width: 0;
  font-weight: bold;
  font-size: 15px;
  background-color: lightblue;
}

<div id="kalkulacka">
  <div id="vysledek">
    <div id="historie">
      <p id="history-value"></p>
    </div>
    <div id="output">
      <p id="output-value"></p>
    </div>
  </div>
  <div id="klavesnice">
    <button class="operator" id="clear">C</button>
    <button class="operator" id="backspace">AC</button>
    <button class="negate" id="opposite">+/-</button>
    <button class="operator" id="/">&#247;</button>
    <button class="number" id="7">7</button>
    <button class="number" id="8">8</button>
    <button class="number" id="9">9</button>
    <button class="operator" id="*">&times;</button>
    <button class="number" id="4">4</button>
    <button class="number" id="5">5</button>
    <button class="number" id="6">6</button>
    <button class="operator" id="-">-</button>
    <button class="number" id="1">1</button>
    <button class="number" id="2">2</button>
    <button class="number" id="3">3</button>
    <button class="operator" id="+">+</button>
    <button class="dot" id=".">.</button>
    <button class="number" id="0">0</button>
    <button class="operator" id="=">=</button>
  </div>
</div>

Answer 1

您获得 NaN 的原因是因为您对 n = Number(num) 中的数字的转换溢出。我建议使用您已经编写的格式方法来控制您可以显示的最大位数。但是，这意味着如果您执行的操作结果太长，仍会显示结果，但不是正确的结果。

这是我对它的修改：

function getFormattedNumber(num) {
  if(num.length > 10){
    num = num.substr(0, 10);
  }
  var n = Number(num);
  var value = n.toLocaleString("en");
  return value;
}

尽管如此，您可能想要编辑它，因为在我看来，显示错误答案比显示 NaN 更糟糕。如果字符串太长，我可能会编辑格式以显示 "Overflow" 等消息。然后在下次点击时自动清除该字段。

计算器问题需要解决

Calculator problems need solving

javascript

calculator