Translating jQuery to javascript

Question

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?

$(document).ready(function(){
    var displayFix = function(num) {
        if (num.length > 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();
        }
    });
});

I suppose I can replace the following lines:

• var total = $(".display") with var total = document.querySelector(".display")
• total.text("0") with total.innerHTML="0"
• $(".dot").click(function() { with document.querySelector(".dot").onclick = function() {

Also, the browser I'm using is a updated Chrome and I don't need it to support other browsers.

Answer 1

youmightnotneedjquery is your friend. You'll see that you can define your own replacement for jQuery.ready():

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Then you'll need to get used to do without jQuery wrapper, which means dealing with array indexes and possibly empty results. So for instance document.querySelector(".dot").onclick = function() { is not going to be enough, you want to do

var dots = document.querySelector(".dot");
for(var i=0; i<dots.length; i++ ){
   dots[i].onclick = function() { ... }
}

Finally, you need to discard elements manually since you have no jQuery .not():

var operators = document.querySelector(".operators span");
for(var i=0; i<operators.length; i++ ){
    var operator = operators[i];
    if(operator.className.indexOf("igual") < 0){
        //do stuff
    }else{
        //don't
    }
}

Note: you may want to use document.getElementById() and document.getElementsByClassName when your selector is just an id or a class.

Hope this short guidance is enough for you to start.

Answer 2

The Javascript equivalent will almost look like this for your jquery code,

(function() {
  var displayFix = function(num) {
    if (num.length > 9) {
      total.innerHTML = num.substr(0, 9);
    }
  };
  var number = "";
  var newNumber = "";
  var operator = "";
  var total = document.getElementsByClassName("display");
  total.innerHTML = "0";

  var sel1 = document.querySelector(".numbers span");  
  for (var i = sel1.length; i--;) {
    if (sel1[i].className != 'clear' && sel1[i].className != 'dot') {
      var arg = sel1[i].innerHTML;
      sel1[i].onclick = function(arg) {
        return function() { 
          number += arg;
          total.innerHTML = number;
          displayFix(number);
        };
      };
    }
  }

  var sel2 = document.querySelector(".dot");
  sel2.onclick = function() {
    if (number.length == 0) {
      number = "0.";
    } else {
      number += sel2.innerHTML;
      total.innerHTML = number;
      displayFix(number);
    };
  };

  var sel3 = document.querySelector(".operators span");

  for (var i = sel3.length; i--;) {
    if (sel3[i].className != 'igual') {
      var arg = sel3[i].innerHTML;
      sel3[i].onclick = function(arg) {
        return function() { 
          operator = arg;
          newNumber = number;
          number = "";
          total.innerHTML = "0";
        };
      };
    }
  }


  document.querySelector(".clear").onclick = function() {
    number = "";
    total.innerHTML = "0";
    newNumber = "";
  };


  document.querySelector(".igual").onclick = 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.innerHTML = number;
    displayFix(number);
    number = "";
    newNumber = "";
  };

  document.querySelector(".igual").onkeypress = function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    var elm = "";
    if (keycode === 49) {
      elm = document.getElementById("num1");
      elm.onclick.apply(elm);
    } else if (keycode === 50) {
      elm = document.getElementById("num2");
      elm.onclick.apply(elm);
    } else if (keycode === 51) {
      elm = document.getElementById("num3");
      elm.onclick.apply(elm);
    }
  };
})();

Disclaimer: The code is just converted to the JavaScript equivalent, not tested with any values.