Function call not working with 'click' event handler

Question

I'm having issues with having a function execute with the click event handler. If I get rid of the function numberCheck() and post the code directly into the event handler, then it works fine. Am I missing something basic here?

Here is my code:

jQuery(document).ready(function(){ 
var scopedVariable;
var number = Math.floor(Math.random()*11);
function numberCheck() {
$(this).closest('#outsideContainer').find('.hotter').addClass('hideStuff');
 $(this).closest('#outsideContainer').find('.colder').addClass('hideStuff');
var guess = $(this).closest('#guessContainer').find('.value').val();
    if( +guess === number)
    {
    $(this).closest('#outsideContainer').find('.gotIt').removeClass('hideStuff');
    }
    else {
        $(this).closest('#guessContainer').find('.value').val('Please guess again');
        if(Math.abs(guess - number) < Math.abs(scopedVariable - number)) {
            $(this).closest('#outsideContainer').find('.hotter').removeClass('hideStuff');
            }
        else if(Math.abs(guess - number) > Math.abs(scopedVariable - number)) {
            $(this).closest('#outsideContainer').find('.colder').removeClass('hideStuff');
            }
        scopedVariable = guess;
        } 


}

$('.query').on('click', function() {

        numberCheck();
  }); 
 });

here is my HTML if needed:

<body>
    <div id="outsideContainer">
    <div id="guessContainer">
        <h3> Guess a number between 1 and 10 </h3>

        <input id="txtfield" name="txtfield" type="text" class="value"/><br>
        <input type = "submit" class="query" />

    </div>
    <div id="guessShow">
        <p class="hotter hideStuff" > Getting Hotter!! </p>
        <p class="colder hideStuff"> Getting Colder, BRRR!!! </p>
        <p class="gotIt hideStuff"> Awesome! You have guessed the number </p>
    </div>
    </div>
    </body>

Any help for this is much appreciated.

I supose $(this) is out of scope when inside a new function. — Rick
– Rick, Commented Jun 7, 2013 at 14:56
please don't forget to mention the framework when you use one. (corrected) — Sebas
– Sebas, Commented Jun 7, 2013 at 15:00
Yeah either replace $(this) with the actual element in the HTML, or pass it as a parameter. — Kevin DiTraglia
– Kevin DiTraglia, Commented Jun 7, 2013 at 15:00

Billy · Accepted Answer · 2013-06-07 15:02:07Z

5

Try passing this to your function (numberCheck(this)) and then name the parameter in your function something else and change the instances of this in the function to that name, like so:

function numberCheck(submitButton) {
    $(submitButton).closest('#outsideContainer').find('.hotter').addClass('hideStuff');
    [...]
}

$('.query').on('click', function() {
    numberCheck(this);
});

answered Jun 7, 2013 at 15:02

Billy

891 silver badge4 bronze badges

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

1 Comment

Aditya Gorti Over a year ago

This worked! I didn't realize $(this) is out of scope inside a new function. Good to know

Rosmarine Popcorn · Accepted Answer · 2013-06-07 15:10:22Z

2

Instead of executing the function, pass that function as an input parameter to the event click.

$('.query').on('click',numberCheck);

On this way, you are passing the callBack as a input parameter, and your function gets access to the object, where the event click was fired.

answered Jun 7, 2013 at 15:10

Rosmarine Popcorn

11k11 gold badges62 silver badges90 bronze badges

Comments

Comfortably Numb · Accepted Answer · 2013-06-07 14:58:11Z

0

Modify your code as

jQuery(document).ready(function(){
   var that = this;
   // the rest of your code

and use that instead of this inside of the inner function.

answered Jun 7, 2013 at 14:58

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Comments

Stiger · Accepted Answer · 2013-06-07 16:06:17Z

I think this is a problem, you should use it as a parameter. Please try this: (I use .click() instead of .on())

jQuery(document).ready(function(){ 
var scopedVariable;
var number = Math.floor(Math.random()*11);
function numberCheck($this) {
    $this.closest('#outsideContainer').find('.hotter').addClass('hideStuff');
    $this.closest('#outsideContainer').find('.colder').addClass('hideStuff');
    var guess = $this.closest('#guessContainer').find('.value').val();
        if( +guess === number)
        {
        $this.closest('#outsideContainer').find('.gotIt').removeClass('hideStuff');
        }
        else {
            $this.closest('#guessContainer').find('.value').val('Please guess again');
            if(Math.abs(guess - number) < Math.abs(scopedVariable - number)) {
                $this.closest('#outsideContainer').find('.hotter').removeClass('hideStuff');
                }
            else if(Math.abs(guess - number) > Math.abs(scopedVariable - number)) {
                $this.closest('#outsideContainer').find('.colder').removeClass('hideStuff');
                }
            scopedVariable = guess;
            } 


}

$('.query').click(function() {
    //console.log($(this).html());
    numberCheck($(this));
});

And this a fiddle. I hope this help.

Collectives™ on Stack Overflow

Function call not working with 'click' event handler

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related