0

I have $display cahsed out in cacheDom function, but it doesn't work when I try to use it in updateResult function this.$display.text(temp).apply(this);. I think it is something to do with scoping rules and I must have missed something. Any helps would be appreciated.

$(document).ready(function() {
  (function() {
    var current = "", result = 0;
    var calculator = {
      init: function() {
        this.cacheDom();
        this.render();
        this.bindEvents();
      },
      cacheDom: function() {
        this.$button = $(".button p, .zero p");
        this.$display = $("#display p");
      },
      bindEvents: function() {
        this.$button.on("click", this.updateResult);
      },
      updateResult: function() {
        var temp = $(this).text();
        if (parseInt(temp) > 0 == false) {
          if (temp == "÷") {
            current += "/";
            this.$display.text(temp).apply(this);
          } else if (temp == "×") {
            current += "*";
            $("#display p").text(temp);
          } else if (temp == "-") {
            current += temp;
            $("#display p").text(temp);
          } else if (temp == "+") {
            current += temp;
            $("#display p").text(temp);
          } else if (temp == "=") {
            current = eval(current);
            $("#display p").text(current);
          } else if (temp == "C") {
            current = "";
            temp = "";
            result = 0;
            $("#display p").text(result);
          } else if (temp == "%") {
            current = current / 100;
            $("#display p").text(current);
          } else if (temp == "√") {
            $("#display p").text(Math.sqrt(parseInt(current[current.length - 1])));
            var sqrt = Math.sqrt(parseInt(current[current.length - 1]));
            current = current.substring(0, current.length - 1)
            current += sqrt;
          }
        } else {
          $("#display p").text(temp);
          current += temp;
        }
        console.log(current);
      },
      render: function() {

      },
    };
    calculator.init();
  })()
});
edgaryp
  • 37
  • 1
  • 8
  • is `this.updateResult` being called anywhere else other than in `bindEvents`? – c2huc2hu Mar 08 '17 at 01:15
  • Using that IIFE inside the `ready` callback is totally pointless. You can and should omit it. – Bergi Mar 08 '17 at 02:20
  • Storing some things (`current`, `result`) in the scope and others (`display`, `button`) on the module object is inconsistent. Choose one approach and stick to it. In this case, for a module that is not really accessed externally, you can actually drop the object altogether. – Bergi Mar 08 '17 at 02:22
  • @user3080953 No, only in `bindEvents `. – edgaryp Mar 08 '17 at 04:08
  • @Bergi Do you mean this line `this.$button.on("click", this.updateResult);`? Can you please explain why it is pointless and should omit it? – edgaryp Mar 08 '17 at 04:15
  • No, I mean the lines `(function() {` and `})()`. – Bergi Mar 08 '17 at 04:16
  • @Bergi Yes I should have the variables stored in the same scope. Thank you for the suggestion. – edgaryp Mar 08 '17 at 04:16
  • The line that you mentioned, the passing of `this.updateResult` without binding it, is the one that's causing it not to work. See the duplicate. – Bergi Mar 08 '17 at 04:16

0 Answers0