Change CSS on every click of a button with JavaScript

Question

I want to increase the right margin of .questionarea by 400px every time a user clicks on .go. Here's my Javascript.

            var marright = "-400px"
        $(".go").click(function(){
          $(".questionarea").animate({
            marginRight: marright
          }, 300 );
         marright += "-400px";
        });

If you take out the second last line, the button works once but I've got no idea of the syntax for increasing the size of the margin on each additional click.

You are appending "-400px" each time. So marright is becoming something like "-400px-400px-400px-400px" (A string). Add the "px" after the arithmetic. — George
– George, Commented Jan 16, 2013 at 14:49

boz · Accepted Answer · 2013-01-16 14:48:17Z

2

Try this:

var marright = -400;
$(".go").click(function(){
    $(".questionarea").animate({
        marginRight: marright
    }, 300, function(){
        marright += -400;
    });
});

You don't need to have marright as a string with the px on the end of it. Jquery is clever enough to work that out for you.

answered Jan 16, 2013 at 14:48

boz

4,9045 gold badges45 silver badges72 bronze badges

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

Comments

Morpheus · Accepted Answer · 2013-01-16 14:48:28Z

0

    $(".go").click(function(){
      $(".questionarea").animate({
        marginRight: "-=400"
      }, 300 );
    });

I think it should be like this.

answered Jan 16, 2013 at 14:48

Morpheus

9,12613 gold badges54 silver badges80 bronze badges

Collectives™ on Stack Overflow

Change CSS on every click of a button with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related