Как я могу преобразовать десятичное число в строку в Javascript (код ошибки)

Question

https://github.com/IplyWaterpolo/BetterCalc (Project Link)

Привет, я работаю над калькулятором, и в настоящее время я пытаюсь отобразить десятичное число на дисплее, но сталкиваюсь с проблема, в которой моя переменная 'num' обнаруживает, когда ставится десятичная дробь, но как только после указанной десятичной дроби добавляется другое число, она игнорирует ее.

Например:
1 нажата -> консоль. войти (число); -> «1» становится выходом
. нажата -> console.log (num); -> «1» становится выводом
1 нажата -> console.log (num); -> «11» становится выводом

Я пытался это исправить некоторое время, но, похоже, ничего не работает. Я добавил пару console.logs в раздел моего Javascript кода, который отображает цифры после нажатия, чтобы помочь с отладкой. (строки 13 и 17). Возможно, это что-то довольно простое, но я не могу найти, что делать, чтобы это исправить.

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;
    console.log(num);
  } else {
    document.getElementById("output-value").innerText = getFormattedNumber(num);
    console.log(num);
  }
}

function getFormattedNumber(num) {
  if (num == "-") {
    return "";
  }
  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) { //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() {
    var output = reverseNumberFormat(getOutput());
    if (output != NaN) { //if output is a number
      output = output + this.id;
      printOutput(output);
    }
  })
}



var modifier = document.getElementById("modifier");
modifier.addEventListener("click", function() {
  var output = getFormattedNumber(getOutput(output));
  output = output + ".";
  printHistory(output);
  reverseNumberFormat(getOutput(output));

  printOutput(output);
})

body {
  font-family: "Open Sans", sans-serif;
  background-color: black;
}

#container {
  width: 1000px;
  height: 550px;
  margin: 20px auto;
}

#calculator {
  width: 320px;
  height: 490px;
  background-color: grey;
  margin: 0 auto;
  position: relative;
  top: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#result {
  height: 120px;
}

#history {
  text-align: right;
  height: 20px;
  margin: 0 20px;
  padding-top: 20px;
  font-size: 15px;
  color: #FaFaFa;
}

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

#keyboard {
  height: 400px;
}

.operator,
.number,
.empty,
.modifier {
  width: 78px;
  height: 70px;
  margin: 1px;
  border-radius: none;
  border-width: 0;
  font-weight: bold;
  font-size: 15px;
  float: left;
}

.number {
  background-color: black;
  color: white;
}

.modifier {
  background-color: black;
  color: white;
}

.empty {
  background-color: grey;
}

.number,
.operator {
  cursor: pointer;
}

.operator:active,
.number:active {
  font-size: 13;
}

.operator:focus,
.number:focus,
.empty:focus,
.modifier:focus {
  outline: 0;
}

button:nth-child(1) {
  font-size: 20px;
  background-color: #000000;
  color: white;
}

button:nth-child(2) {
  font-size: 20px;
  background-color: #000000;
  color: white;
}

button:nth-child(3) {
  font-size: 20px;
  background-color: #000000;
  color: white;
}

button:nth-child(4) {
  font-size: 20px;
  background-color: #20b2aa;
}

button:nth-child(8) {
  font-size: 20px;
  background-color: #e4a112;
}

button:nth-child(12) {
  font-size: 20px;
  background-color: #df654f;
}

button:nth-child(16) {
  font-size: 20px;
  background-color: #22bb22;
}

button:nth-child(20) {
  font-size: 20px;
  background-color: #2222ff;
}

<div id="container">
  <div id=c alculator>
    <div id="result">
      <div id="history">
        <p id="history-value"></p>
      </div>
      <div id="output">
        <p id="output-value">0</p>
      </div>
    </div>
    <div id="keyboard">
      <button class="operator" id="clear">C</button>
      <button class="operator" id="backspace">CE</button>
      <button class="operator" id="%">%</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="empty" id="empty"></button>
      <button class="number" id="0">0</button>
      <button class="modifier" id="modifier">.</button>
      <button class="operator" id="=">=</button>

    </div>
  </div>

</div>

Answer 1

Проблема в том, что reverseNumberFormat() отбрасывает конечный . в номере, потому что он вызывает Number(). Когда "11." анализируется как число, оно просто возвращает целое число 11.

. Вы должны сохранить его как строку, чтобы при анализе и отображении результатов происходил анализ числа.

function reverseNumberFormat(num) {
  return num.replace(/,/g, '');
}