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更糟。我可能会编辑格式以显示“溢出”消息，或者如果字符串太长则显示此类消息。然后在下次单击时自动清除该字段。

计算器问题需要解决

1 个答案: