CODEWITHSUNDEEP
javascript
mariki
mariki

Reputation: 125

Objects's global variable

The problem is with object's variable:

this.timer

it's not "global", so when I click the stop button the value of the variable is wrong.
If I declare a global variable MyObject (loke var mytimer;) and use it instead this.timer, it works.

This is my code:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title></title>
        <script type="text/javascript" language="JavaScript">               
            var MyObject = {

                init: function(){
                    this.timer = 0;
                    document.getElementById("btn1").onclick = function(){
                        MyObject.RunIt();
                    };
                    document.getElementById("btn2").onclick = function(){
                        clearInterval(this.timer);
                    };

                },

                RunIt: function(){
                    var x=0;
                    this.timer = setInterval(function(){
                x++;
                        document.getElementById("spn").innerHTML=x;
                    }, 1000);

                }

            };


        </script>
        <style type="text/css">
        </style>
    </head>
    <body onload="MyObject.init();">
        <input type="button" id="btn1" value="Run"/>
        <input type="button" id="btn2" value="Stop"/>
        <span id="spn"></span>
    </body>
</html>

Upvotes: 1

Views: 1256

Answers (3)

Frunsi
Frunsi

Reputation: 7147

You can access an object through this only if the object was created by new.

The this in your code refers to the window object. In the event handlers it refers to the respective HTML element.

Read a detailled explanation.

Your MyObject declaration is an object, but lets say that it is not an object instance. There is a difference in JS.

Object instance example:

        function MyClass() {
                this.timer = 0;

                this.RunIt = function() {
                        var x=0;
                        this.timer = setInterval(function(){
                                x++;
                                document.getElementById("spn").innerHTML=x;
                        }, 1000);
                };

                var me = this; // alias to current "this"

                document.getElementById("btn1").onclick = function(){
                    // "this" refers to btn1, use me
                    me.RunIt();
                };
                document.getElementById("btn2").onclick = function(){
                    // "this" refers to btn2, use me
                    clearInterval(me.timer);
                };
        }

        var MyObject = new MyClass();

Note, that there are many different ways to construct objects in JavaScript.

EDIT: it contains another bug: the event handler functions will be executed as members of the HTML element. So this in the handlers refers to the HTML element, not to your object.

EDIT: fixed the code

EDIT: Bad day, don't listen to me ;-)

Upvotes: -1

Alexar
Alexar

Reputation: 1878

This is a common problem in writing javascript code; the Scope.

in an .onclick method on an element, the scope (this) is the element itself not the class you are in (MyObject).

i use this/that method; like below:

            init: function(){
                this.timer = 0;
                document.getElementById("btn1").onclick = function(){
                    MyObject.RunIt();
                };

                var that = this;
                document.getElementById("btn2").onclick = function(){
                    /** 
                        Here i use 'that' instead of 'this';
                        because 'this' is the button element
                    */
                    clearInterval(that.timer);
                };

            },

Upvotes: 1

Pointy
Pointy

Reputation: 413712

The problem is this: when you set "onclick" to a function call like that, there's no object reference in the call. The browser calls your function to do the "clearInterval", but "this" is not pointing to your object - in fact, it's pointing at the button element itself.

Here's one way to work around the problem:

var self = this;
document.getElementById('btn2').onclick = function() {
  clearInterval(self.timer);
};

I know that question-askers on Stackoverflow get annoyed sometimes when people urge them to investigate jQuery or some other modern Javascript framework, but it's simply a better way to do things.

Upvotes: 2

Related Questions