I am facing problem in calling a function demo1() directly on button call. Please See Code

var FormImageCrop = function (){
    var demo1 = function() {
        var jcrop_api;
        $('#demo1').Jcrop({
          onChange:   showCoords,
          aspectRatio: 4 / 3
        },function(){
          jcrop_api = this;
        jcrop_api.setSelect([0,0,3200,2400]);
        });
        $('#coords1').on('change','input',function(e){
          var x1 = $('#x11').val(),
              x2 = $('#x12').val(),
              y1 = $('#y11').val(),
              y2 = $('#y12').val();
          jcrop_api.setSelect([x1,y1,x2,y2]);
        });
        function showCoords(c)
        {
             $('#x11').val(c.x);
            $('#y11').val(c.y);
            $('#x12').val(c.x2);
            $('#y12').val(c.y2);
            $('#w1').val(c.w);
            $('#h1').val(c.h);
        };
    }
    return {
        init: function () {

            if (!jQuery().Jcrop) {;
                return;
            }

            demo1();
        }

    };
}();

i want to call this function on button click like <button onclick="demo1()">Click it</button>

How can i call this function???

I am facing problem in calling a function demo1() directly on button call. Please See Code

var FormImageCrop = function (){
    var demo1 = function() {
        var jcrop_api;
        $('#demo1').Jcrop({
          onChange:   showCoords,
          aspectRatio: 4 / 3
        },function(){
          jcrop_api = this;
        jcrop_api.setSelect([0,0,3200,2400]);
        });
        $('#coords1').on('change','input',function(e){
          var x1 = $('#x11').val(),
              x2 = $('#x12').val(),
              y1 = $('#y11').val(),
              y2 = $('#y12').val();
          jcrop_api.setSelect([x1,y1,x2,y2]);
        });
        function showCoords(c)
        {
             $('#x11').val(c.x);
            $('#y11').val(c.y);
            $('#x12').val(c.x2);
            $('#y12').val(c.y2);
            $('#w1').val(c.w);
            $('#h1').val(c.h);
        };
    }
    return {
        init: function () {

            if (!jQuery().Jcrop) {;
                return;
            }

            demo1();
        }

    };
}();

i want to call this function on button click like <button onclick="demo1()">Click it</button>

How can i call this function???

• javascript
• jquery
• image

• 1 Why do you need to define the function within another function? – wnbates Commented Feb 7, 2015 at 10:51
• Define outside and call it twice - once from the function and once from the button. – sideroxylon Commented Feb 7, 2015 at 10:54

3 Answers 3

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Will return "John Doe"

That is all. You can read this whole tutorial from here http://www.w3schools./js/js_function_invocation.asp

Or you can try this

var my_foo= function foo() {

    // do something

}
myfoo();

or

function bar() {

    // do something

}
bar();

The only way to call function within the HTML is if the function itself is exposed on the global window object. I wouldn't necessarily do it like this but if you still want to call the function on the onlick property of the button you could do it like this:

 var FormImageCrop = function (){
        window.demo1 = function() {
            ...
            ...
        }
        return {
            init: function () {
                ...
                ...
                window.demo1();
            }

        };
}();

As i said, this is no ideal but it will work. A better alternative is to add an event listener to the button.

Hope it helps.

You can also like that

var FormImageCrop = function (){
        window.demo1 = function(val) {
           alert(val);
        }
        return {
            init: function () {
                window.demo1();
            }
        };
}();

And button Link this

<button onclick="demo1('abc')">Click It</button>