Problem with js class

[xenophobia]

Hi,

I have a simple class here:

function MyClass(id){
    this.input_box = document.getElementById(id);
    this.test_value = "Hello World!";

    this.input_box.onkeydown = function(){
        alert(this.test_value);
    };

    this.test_function = function(){
        alert(this.test_value);
    };
}

usage:
var c_1 = new MyClass("myinputbox");

c_1.test_function();

 

Alright. "myinputbox" is an ordinary textbox. So the class will implement an event when user input a character into the textbox and a msgbox will prompt out.

 

The problem is the msgbox is saying "undefined" instead of "Hello World".

 

But however, if I call it using the test_function, it will prompt "Hello World".

 

Is the problem of variable scope?

[phpQuestioner]

 

OK , I'm not getting what your wanting to do. Do you want an alert with the value of the textbox onkeyup or do you just want an alert to occur whenever text is typed into the textbox; that says "Hello World"?

[xenophobia]

Hmmm.. Alright then, can you show me how to do it when user press a key on the textbox and alert the content using class. Which mean I want a class to handle all this instead of a function.

 

Thanks.

[phpQuestioner]

 

Sorry, I don't create/deal with classes in javascript, but I can help you with a function; if you choose to go that way.

[emehrkay]

The problem is that you create a closure when you apply a function to an event. Closure functions have their own scope, or their own "this," understand? So the this inside of your onkeydown refers to the element itself, not the MyClass function.

 

To get around this, you need to use apply to bind the keyword this to the onkeydown function of the MyClass function. Check it out

 

        <script type="text/javascript">
            Function.prototype.bind = function(object) {
                var method = this;
                return function() {
                    method.apply(object, arguments);
                }
            }
            
            function MyClass(id){
                this.input_box = document.getElementById(id);
                this.test_value = "Hello World!";
            
                this.input_box.onkeydown = function(){
                    console.log(this.test_value);
                }.bind(this);
            
                this.test_function = function(){
                    alert(this.test_value);
                };
            }
            onload = function(){
                new MyClass('test');
            }
        </script>

 

Function.prototype.bind adds the bind() method to any function allowing you to change the scope of "this"

 

now to help you understand what I am saying, in your onkeydown function remove the bind call and alert(this.value); this is the object or the input field

 

this.input_box.onkeydown = function(){
                    console.log(this.value);
                };

[emehrkay]

Disregard my usage of "closure", it was the wrong word to use, but everything else I said was correct

[GameYin]

If you are having trouble calling a variable outside of the function then your variable scope is local not global. If you want to make the variable scope global (that way you can call a variable outside of a function) then you create the variable OUTSIDE and BEFORE the original function is created.