JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="test">Lorem</div>

CSS

#test {
    width: 25em;
    padding: 1.5em;
    font: 1em Arial, sans-serif;
    background: #ffc300;
    border: 0.125em solid;
    border-radius: 0.5em;
    margin: 2em;
}

JavaScript

var App = new

function() {
    var self = this; // store this that points to App
    this.element = $('#test');
    this.get = function() {
        return '#' + this.element[0].id;
    };
    this.action = function() {
        this.element.click(function() { // New scope !!!
            alert(this.get()); // Now this points to App.element, not to App
        });
    };

    this.fix = function() {

        this.element.animate({
            fontSize: '20px'
        }, 800, function() { // New scope !!!
            alert(self.get()); // self points to App, so that get() can be accessed
            $(self).bind('clear', function() { // bind a custom event to App
                self.element.animate({ // self = App
                    fontSize: '16px'
                }, 800);
            });

            $(self).trigger('clear'); // trigger the custom event
        });;




    };


}();


alert(App.get()); // #test
App.action(); // Uncaught TypeError: Object #<HTMLDivElement> has no method 'get'
App.fix(); // #test