Uncaught TypeError: this.rotate is not a function

Question

I have created a function for rotating a div element. This works fine as a standalone code in HTML and when I tried to incorporate in my project the rotate function throws an error as "Uncaught TypeError: this.rotate is not a function". My project is based on node version 8 and I have converted HTML to Pug and used it. I have given my code below:

      var rotation = 0;
      $.fn.rotate = function(degrees) {
      $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
      '-moz-transform' : 'rotate('+ degrees +'deg)',
      '-ms-transform' : 'rotate('+ degrees +'deg)',
      'transform' : 'rotate('+ degrees +'deg)'});
      };
      $('.box').click(function() {
      rotation += 5;
      this.rotate(rotation);
      });

Shouldn’t that be `$(this).rotate(rotation);`? – Sebastian Simon Sep 14 '21 at 05:42 — Sebastian Simon, Sep 14 '21 at 05:42

score 0 · Answer 1 · answered Sep 14 '21 at 06:09

You should use arrow functions or bind the function to 'this'

  var rotation = 0;
  $.fn.rotate =(degrees) => {
  $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
  '-moz-transform' : 'rotate('+ degrees +'deg)',
  '-ms-transform' : 'rotate('+ degrees +'deg)',
  'transform' : 'rotate('+ degrees +'deg)'});
  };
  $('.box').click(() => {
  rotation += 5;
  this.rotate(rotation);
  });

The handling of this is also different in arrow functions compared to regular functions.

In short, with arrow functions there are no binding of this.

In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.

With arrow functions the this keyword always represents the object that defined the arrow function.

https://www.w3schools.com/js/js_arrow_function.asp

Good luck!

Uncaught TypeError: this.rotate is not a function

1 Answers1