Jquery change variable on click

Question

Right, what I'd like to happen is when a button (or in this case, some text) is pressed, Jquery shows a div tag that contains an image, fades out the image after 2 seconds then displays some text.
This all works nicely, however I only want it to work once.
I decided to do this by using a variable and an if statement, so the variable changes from 0 to 1 and then the button cannot be clicked again due to the variable being changed.
Or at least, that's the badly worded version.

Anyhow, this is what I have so far, but for some reason the variable won't change from 0 to 1 after the button has been clicked, other than that, it works well.

The JS:

$(document).ready(function(){
    $("#text2").css("display","none");
    $("#ltt").css("display","none");
    var clicked = '0';
    if(clicked == 0) {
        $(".clicker").click(function() { 
            $("#ltt").fadeIn("slow");
            $('#ltt').delay(2000).fadeOut('slow');
            $("#text2").delay(3000).fadeIn(1000);
            $clicked = '1';
        });
    }
});

The HTML:

<div class="clicker">
    click to see text
</div>
<div id="ltt">
    <img src="Images/LoadingCircle.gif" width="24" height="24">
</div>
<div id="text2">
    SOME TEXT
</div>

Rajaprabhu Aravindasamy · Accepted Answer · 2014-05-12 12:15:23Z

1

Try to use .one() in this context,

$(".clicker").one('click', function() { 
    $("#ltt").fadeIn("slow");
    $('#ltt').delay(2000).fadeOut('slow');
    $("#text2").delay(3000).fadeIn(1000);
});

answered May 12, 2014 at 12:15

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

1 Comment

Byonex Over a year ago

Aha, so that's how you do it! This code works perfectly, thank you!

Milind Anantwar · Accepted Answer · 2014-05-12 12:15:48Z

1

You should use .one() instead:

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

$(".clicker").one('click',function() { 
  $("#ltt").fadeIn("slow");
  $('#ltt').delay(2000).fadeOut('slow');
  $("#text2").delay(3000).fadeIn(1000);
  $clicked = '1';
});

answered May 12, 2014 at 12:15

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

KhorneHoly · Accepted Answer · 2014-05-12 12:16:54Z

0

You declared the variable to

var clicked = '0';

but calling

$clicked = '1';

later on, so your variable will not be found.

Other than in PHP you don't need the Dollar $ to declare a variable, it's just a simple typo :)

answered May 12, 2014 at 12:16

KhorneHoly

4,7767 gold badges48 silver badges78 bronze badges

Comments

LNT · Accepted Answer · 2014-05-12 12:20:32Z

0

well this should work :)

$(document).ready(function(){
    $("#text2").css("display","none");
    $("#ltt").css("display","none");
    window.clicked = false;
        $(".clicker").click(function() { 
            if(!window.clicked){
               $("#ltt").fadeIn("slow");
               $('#ltt').delay(2000).fadeOut('slow');
               $("#text2").delay(3000).fadeIn(1000);
               window.clicked = true;
            }
        });
});

answered May 12, 2014 at 12:20

LNT

9268 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery change variable on click

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