CODEWITHSUNDEEP
javascriptclassonclick
James Woods
James Woods

Reputation: 61

Call class instance method onclick javascript

I have a javascript file with classes which contain method functions. I was wondering how to go about calling a class instance method from an onClick event.

function MyClass()
{
    this.instanceData = "Display Me";

    this.DisplayData = function()
    {
        document.write(this.instanceData);
    }
}

var classInstance = new MyClass();

How would I call the DisplayData function on classInstance from an onClick event. For example:

<button onClick="classInstance.DisplayData()">Click Me!</button>

Which doesn't work, but helps me clarify what I'm looking to do. Any suggestions?

Upvotes: 6

Views: 27997

Answers (3)

Ziki
Ziki

Reputation: 1440

All of the answers above seem to over-complicate the situation a bit.

I simply use this:

MyClass = new function() {
    this.instanceData = "Display Me";

    this.DisplayData = function() {
        alert(this.instanceData);
    };
};

And here is the button:

<button onClick="MyClass.DisplayData()">Click Me!</button>

And here is a fiddle that demonstrates this: Fiddle

Upvotes: -3

T.J. Crowder
T.J. Crowder

Reputation: 1074138

Your code works just fine assuming it's at global scope, except that you can't use document.write after the page is loaded. So:

function MyClass()
{
    this.instanceData = "Display Me";

    this.DisplayData = function()
    {
        alert(this.instanceData); // <=== only change here
    }
}

var classInstance = new MyClass();

...works fine with your onclick attribute. Live example | source

document.write is primarily for use during the page load. If you call it after page load, it implies a document.open which wipes out the current document and replaces it with the content you write. If you want to append to the page after page load, use createElement and appendChild, setting the content of the element via innerHTML. For instance:

var p = document.createElement('p');
p.innerHTML = "Hi there";
document.body.appendChild(p);

...appends a paragraph containing "Hi there" to the page.

However, I urge you not to use onclick attributes and such, not least because they require access to global variables and functions, and I advocate avoiding having global variables and functions to the extent you can (and you can almost completely avoid them). Instead, use modern methods of hooking up event handlers: addEventListener and (to support IE8 and earlier) attachEvent.

So changing your example so that it doesn't create any globals:

(function() {
    function MyClass()
    {
        this.instanceData = "Display Me";

        this.DisplayData = function()
        {
            alert(this.instanceData);
        }
    }

    var classInstance = new MyClass();

    // ...and hook it up
    var button = document.getElementById("theButton");
    if (button.addEventListener) {
        button.addEventListener('click', function() {
            classInstance.DisplayData();
        }, false);
    }
    else if (button.attachEvent) {
        button.attachEvent('onclick', function() {
            classInstance.DisplayData();
        });
    }
    else {
        // Very old browser, complain
    }
})();

(Note that the event name is "click" with addEventListener, "onclick" with attachEvent.)

That assumes the button looks like this:

<button id="theButton">Click Me!</button>

...and that your code runs after the button has already been put on the page (e.g., your script is at the bottom of the page or runs in response to some event).

Now, it's a pain to check whether to use addEventListener or attachEvent every single time. Also, you may not want every element you need to work with to have an id. This is where using a good JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others is useful. They smooth over the event stuff (and many other idiosyncrasies) for you, and provide useful features for locating elements in ways other than by id (in many cases, supporting nearly all CSS-style selectors, even on older browsers that don't have querySelector / querySelectorAll built in.

Upvotes: 4

sankargorthi
sankargorthi

Reputation: 369

http://jsfiddle.net/EyMCQ/1/

As you notice, this does not work, because the var you've declared, stays in the scope of the executing block. If you remove the var, it'll work, because classInstance is now in the global scope.

function MyClass() {
    this.instanceData = "Display Me";

    this.DisplayData = function() {
        alert(this.instanceData);
    }
}

classInstance = new MyClass();​

and call it like this:

<button onClick="classInstance.DisplayData.call(classInstance)">Click Me!</button>​

http://jsfiddle.net/EyMCQ/2/

Upvotes: 7

Related Questions