title: calling a function from inside jquery click function
body: <p>I am trying to call a javascript function from a jquery click function but not able to do so.</p>
  
  <p>here is my code.</p>
  
  <pre><code> OnSubmit: function(){
              $("#problemsubmit").click(function(){
                  var value = $("#probleminput").val();
                  $('#prob_submit_mssg').text(value);
                  $("#probleminput").val('');
                  this.checkAnswer();
              });
          },
  </code></pre>
  
  <p>and trying to call below function from the block</p>
  
  <pre><code>checkAnswer:function(){
               console.log($('#prob_submit_mssg').text());
               if($('#prob_submit_mssg').text() == this.qsAns){
                      console.log("TRUE");
               }
          },
  </code></pre>
  
  <p>below is my html/css file </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Impact Game&lt;/title&gt;
      &lt;style type="text/css"&gt;
          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;
          }
  
      &lt;/style&gt;
      &lt;script type="text/javascript" src="lib/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="lib/impact/impact.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="lib/game/main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="canvaswrapper"&gt;
          &lt;canvas id="canvas" width="1024" height="768"&gt;&lt;/canvas&gt;
      &lt;div id="problemform" class="form-inline"&gt;
          &lt;input id="probleminput" class="form-inline" type="text" style="display: inline;"&gt;&lt;/input&gt;
          &lt;button id="problemsubmit" class="btn" style="display: inline-block;"&gt;Submit&lt;/button&gt;
                  &lt;a id='testop' &gt;&lt;/a&gt;
      &lt;/div&gt;
          &lt;div id ="prob_submit_mssg" style="display: block;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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?</p>