title: Translating jQuery to javascript
body: <p>I'm new to SO and to JS. I want to translate this code to pure JS but I'm really struggling.  May someone help me please?</p>
  
  <pre><code>$(document).ready(function(){
      var displayFix = function(num) {
          if (num.length &gt; 9) {
              total.text(num.substr(0,9));
          }
      };
      var number = "";
      var newNumber = "";
      var operator = "";
      var total = $(".display");
      total.text("0");
  
      $(".numbers span").not(".clear, .dot").click(function(){
          number += $(this).text();
          total.text(number);
          displayFix(number);
      });
      $(".dot").click(function() {
          if ( number.length == 0)     
      { number = "0.";
      } else {
          number += $(this).text();
          total.text(number);
          displayFix(number);
      };
      });
      $(".operators span").not(".igual").click(function(){
          operator = $(this).text();
          newNumber = number;
          number = "";
          total.text("0");
      });
      $(".clear").click(function(){
          number = "";
          total.text("0");
          newNumber = "";
      });
      $(".igual").click(function(){
          if (operator === "+"){
              number = (parseFloat(newNumber,10) + parseFloat(number,10)).toString(10);
          } else if (operator === "-"){
              number = (parseFloat(newNumber,10) - parseFloat(number,10)).toString(10);
          } else if (operator === "/"){
              number = (parseFloat(newNumber,10) / parseFloat(number,10)).toString(10);
          } else if (operator === "*"){
              number = (parseFloat(newNumber,10) * parseFloat(number,10)).toString(10);
          }
          total.text(number);
          displayFix(number);
          number = "";
          newNumber = "";
      });
          $(document).keypress(function(event){
          var keycode = (event.keyCode ? event.keyCode : event.which);
          if (keycode === 49) {
              $("#num1").click();
         } else if (keycode === 50) {
              $("#num2").click();
          } else if (keycode === 51) {
              $("#num3").click();
          }
      });
  });
  </code></pre>
  
  <p>I suppose I can replace the following lines:</p>
  
  <ul>
  <li><code>var total = $(".display")</code> with <code>var total = document.querySelector(".display")</code></li>
  <li><code>total.text("0")</code> with <code>total.innerHTML="0"</code></li>
  <li><code>$(".dot").click(function() {</code> with <code>document.querySelector(".dot").onclick = function() {</code></li>
  </ul>
  
  <p>Also, the browser I'm using is a updated Chrome and I don't need it to support other browsers.</p>