How do I call this function using onclick in HTML?

Question

I just started maintaining someones code and I am not sure whats going on here.

$(document).ready(function () {

     function Test() {

        var that = this;
        that.testFunc = function() {
        }
     }    
}

I want to execute that testFunc onclick from HTML. How do I do this? Anyway I can also simplify this? I am confused on this coding style

Okay, you see the document.ready you have wrapped everything in? That is a method that calls the function that it is passed to it when the document is ready. Use the same pattern to add onclick event handlers. (get dom element).addClickHandler(Test) — James G., Jul 06 '15 at 21:41
In your posted code, `this` is the window object, so calling `Test()` essentially creates a global function named `testFunc`. — Rick Hitchcock, Jul 06 '15 at 21:41
Question? Who is marking every ones code down and not leaving comments? I marked peoples back up because they do work. — Adam Buchanan Smith, Jul 06 '15 at 21:47
mine is still down. I dont know whats happening here! Amused! — Sudhansu Choudhary, Jul 06 '15 at 21:52

score 2 · Answer 1 · edited May 23 '17 at 12:21

Don't use <button onclick="...">. If you're using jQuery, get the element using selectors and set up an event listener.

$('button').click(function(){
    ...
});

The code you've posted it a bit barmy, and not readable. It could use refactoring.

If you insist on leaving it how it is, you can do this...:

$(document).ready(function () {
     function Test() {
        var that = this;
        that.testFunc = function() {
            //alert('i will also fire when this.testFunc() is called.');
        }

        // alert('i will fire');
        this.testFunc();
     }  

    $('button').click(function(){
       Test(); 
    });
});

Here's a fiddle of that working.

The coding-style is a poor attempt at OO-Javascript. W3Schools (I know...) could be a good place to start understanding what it's all about. Alternatively, this post on Stack is all about the this keyword, and has some links to great resources.

TLDR; Code looks really clever, but is just confusing and rubbish.

Update

Ok, so here's what happens.

$(document).ready(function () {        // when the page is loaded, run this function
    function Test() {                  // create a named function called Test. 
                                       // Note that this function is only visible (so can only be called) within the anonymous function being run after $(document).ready.
        var that = this;               // set a variable ('that') to 'this' - a special keyword. At this point, 'this' will refer to the Global scope.
        that.testFunc = function() {   // create a function called testFunc on the object which is now 'that' - i.e. Global scope, the Window object.
                                       // basically, create window.testFunc.
            //alert('i will also fire when this.testFunc() is called.');
        }

        // alert('i will fire');
        this.testFunc();               // call window.testFunc();
    }  

    $('button').click(function(){
        Test();                        // run the Test function explained above
    });
});

So, if you don't refactor, you need to do something like:

$(document).ready(function(){
    function Test(){
        var that = this;
        that.testFunc = function(){
            ...
        };
    }

    $('button').click(function(){
        testFunc();
    });
    Test();
});

Basically, you need to run Test() to create testFunc as part of the Global Scope. The code is difficult to follow, and can easily be misinterpreted - so I implore you to refactor and get it done properly.

Here's (another) fiddle of the button just calling testFunc.

The code in the question is obviously just a fragment of the entire thing; it's not really enough to say it's "rubbish" without knowing what it's for and what the context is. — JJJ, Jul 06 '15 at 21:56
It's got a named function not set as a `var`, has `var that=this;` rather than using a decent scoping technique, and uses `that.func = function(){...}` instead of the perfectly acceptable `this.func = function(){...}`. The mixing of `this`,`that`, named functions and anonymous functions set as `var`'s is enough for me to deem the code as crap, even if it is only a tiny fragment. — Dave Salomon, Jul 06 '15 at 22:03
wouldnt the button click invoke the entire Test() function. I am just trying to invoke the testFunc() function insidei t — Rajesh K, Jul 06 '15 at 22:29

score 0 · Answer 2 · answered Jul 06 '15 at 21:42

0

The best way to do this would be using the .click() method in jQuery.

$('.element').click(testFunc);

If you want/need to use the HTML onClick attribute:

<input type="button" onclick="testFunc();" />

answered Jul 06 '15 at 21:42

Guy

10,931
5
36
47

score 0 · Answer 3 · answered Jul 06 '15 at 21:45

0

Just calling testFunc() from the handler should be enough, since testFunc is being assigned to the window context. That is, assuming Test() is called at some point.

JSFiddle Example

answered Jul 06 '15 at 21:45

AlliterativeAlice

11,841
9
52
69

How do I call this function using onclick in HTML?

3 Answers3