calling a function from inside jquery click function

Question

I am trying to call a javascript function from a jquery click function but not able to do so.

here is my code.

 OnSubmit: function(){
            $("#problemsubmit").click(function(){
                var value = $("#probleminput").val();
                $('#prob_submit_mssg').text(value);
                $("#probleminput").val('');
                this.checkAnswer();
            });
        },

and trying to call below function from the block

checkAnswer:function(){
             console.log($('#prob_submit_mssg').text());
             if($('#prob_submit_mssg').text() == this.qsAns){
                    console.log("TRUE");
             }
        },

below is my html/css file

<!DOCTYPE html>
<html>
<head>
    <title>Impact Game</title>
    <style type="text/css">
        html,body {
            background-color: #333;
            color: #fff;
            font-family: helvetica, arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 12pt;
        }
        #problemform {
            display: none;
            width: 300px;
            height: 100px;
        }
        #probleminput {
            position: absolute;
            display: none;
            top: 450px;
            left: 240px;
            height: 50px;
            width: 350px;
        }
        #problemsubmit {
            position: absolute;
            display: none;
            top: 530px;
            left: 623px;
            height: 40px;
            width: 100px;
            padding: 5px 10px 8px 2px;
        }
        #prob_submit_msg {
            width: 30%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        #canvaswrapper {
            position: relative;
            height: 768px;
            width: 1024px;
            display: block;
            margin: auto;
            margin-top: 80px;
            vertical-align: middle;

        }
        #canvas {

            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

    </style>
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="lib/impact/impact.js"></script>
    <script type="text/javascript" src="lib/game/main.js"></script>
</head>
<body>
<div id="canvaswrapper">
        <canvas id="canvas" width="1024" height="768"></canvas>
    <div id="problemform" class="form-inline">
        <input id="probleminput" class="form-inline" type="text" style="display: inline;"></input>
        <button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
                <a id='testop' ></a>
    </div>
        <div id ="prob_submit_mssg" style="display: block;"></div>
</div>
<script>
</script>
</body>
</html>

What I am trying to do is trigger a check event when the user clicks on submit button. The only way to check this would be inside the .click function block but when I call this.checkAnswer() inside this block it does not get called but when I call it outside the block it gets called but I do not want that. Is there any way to call a function or set a variable when the submit button gets clicked?

Arun P Johny · Accepted Answer · 2014-02-19 23:17:39Z

2

The problem is the this reference. this inside the event handler refers to the clicked dom element rather than the object which contains the checkAnswer method.

One of the easiest solution is to use a closure variable to hold the object reference in OnSubmit and then use that object reference inside click handler to call the desired method in the object as shown below.

OnSubmit: function () {
    var self = this;
    $("#problemsubmit").click(function () {
        var value = $("#probleminput").val();
        $('#prob_submit_mssg').text(value);
        $("#probleminput").val('');
        self.checkAnswer();
    });
},

answered Feb 19, 2014 at 23:17

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luke Cordingley · Accepted Answer · 2014-02-19 23:16:46Z

The problem is scoping. In JavaScript the value of "this" is whatever you tell it to be and you are dealing with jQuery so you don't get to choose. JavaScript doesn't work like objects you're most likely used to. The best way to accomplish this is to create the function you want to call inside of a variable or object at the window level (it wouldn't be a bad idea to namespace your function as well). For example:

window.namespace_util = {
    checkAnswer: function() {
         console.log($('#prob_submit_mssg').text());
         if($('#prob_submit_mssg').text() == this.qsAns){
                console.log("TRUE");
         }
    },
}

Once you have your check answer function defined in a variable at the window scope you can call it as such:

OnSubmit: function(){
    $("#problemsubmit").click(function(){
        var value = $("#probleminput").val();
        $('#prob_submit_mssg').text(value);
        $("#probleminput").val('');
            window.namespace_util.checkAnswer();
    });
},

You don't have to declare this method on the window scope but the bottom line is you cannot reliably use the keyword "this" to refer to whatever parent object you be inside. I know this is likely confusing and I don't want to get into the why and how. Just know that with JavaScript the keyword "this" does not behave how you would expect it to regarding classic OOP and in order to call a method you need to fully qualify the call.

David Goss · Accepted Answer · 2014-02-19 23:31:17Z

0

The problem here is that when you do $("#problemsubmit"), it doesn't return a HTMLElement, but a custom jQuery array (in this case with only 1 index since it's an ID selector). However, jQuery provides a way to get at the underlying HTMLElement which is what you want, so try this:

$("#problemsubmit").click(function(){
    var value = $("#probleminput").val();
    $('#prob_submit_mssg').text(value);
    $("#probleminput").val('');
    this.get(0).checkAnswer();
});

Hope this helps.

answered Feb 19, 2014 at 23:31

David Goss

7074 silver badges8 bronze badges

Collectives™ on Stack Overflow

calling a function from inside jquery click function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related