title: Calculator problems need solving
body: <p>I need to limit the numbers I click on screen to like 10 digits. Now I can click until there is NAN showed there. I'm beginner so please help me. I also have a problem with <kbd>+/-</kbd> button so if you know how to make it work I would be thankful. Also if you can help me with when I divide by zero there is a problem with infinity I don't know how to solve that.</p>
  
  <p>Here's my code until now.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; 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 == "" &amp;&amp; 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 &lt; number.length; i++) {
    number[i].addEventListener('click', function() {
      var output = reverseNumberFormat(getOutput());
      if (output != NaN) {
        output = output + this.id;
        printOutput(output);
        dot = false;
      }
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="kalkulacka"&gt;
    &lt;div id="vysledek"&gt;
      &lt;div id="historie"&gt;
        &lt;p id="history-value"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="output"&gt;
        &lt;p id="output-value"&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="klavesnice"&gt;
      &lt;button class="operator" id="clear"&gt;C&lt;/button&gt;
      &lt;button class="operator" id="backspace"&gt;AC&lt;/button&gt;
      &lt;button class="negate" id="opposite"&gt;+/-&lt;/button&gt;
      &lt;button class="operator" id="/"&gt;&amp;#247;&lt;/button&gt;
      &lt;button class="number" id="7"&gt;7&lt;/button&gt;
      &lt;button class="number" id="8"&gt;8&lt;/button&gt;
      &lt;button class="number" id="9"&gt;9&lt;/button&gt;
      &lt;button class="operator" id="*"&gt;&amp;times;&lt;/button&gt;
      &lt;button class="number" id="4"&gt;4&lt;/button&gt;
      &lt;button class="number" id="5"&gt;5&lt;/button&gt;
      &lt;button class="number" id="6"&gt;6&lt;/button&gt;
      &lt;button class="operator" id="-"&gt;-&lt;/button&gt;
      &lt;button class="number" id="1"&gt;1&lt;/button&gt;
      &lt;button class="number" id="2"&gt;2&lt;/button&gt;
      &lt;button class="number" id="3"&gt;3&lt;/button&gt;
      &lt;button class="operator" id="+"&gt;+&lt;/button&gt;
      &lt;button class="dot" id="."&gt;.&lt;/button&gt;
      &lt;button class="number" id="0"&gt;0&lt;/button&gt;
      &lt;button class="operator" id="="&gt;=&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>