Jquery not updating css onclick

Question

I am having a JQuery problem today here's the code dump to start us off

$(function() {
    var distance = 0;
    $('.right').click(function() {
        distance -= 100;
        $('#container').css('transform', 'translateX(' + distance + '%)')
        console.log(distance);
    });
    $('.left').click(function() {
        distance += 100;
        $('#container').css('transform', 'translateX(' + distance + '%);')
        console.log(distance);
    });
});

What this code is doing is move width of the users page 100% to the left or 100% to the right. When I click a button with a class name of 'right' it works all fine, but when I click a class name of 'left' it displays it in the console as it should but it doesn't move the page, it needs me to press another button before it updates.

Shady Alset · Accepted Answer · 2016-05-02 22:53:53Z

3

Just remove ; from this line:

$('#container').css('transform', 'translateX(' + distance + '%);')
//                                                             ^ Remove it

$('.left').click(function() {
    distance += 100;
    $('#container').css('transform', 'translateX(' + distance + '%)')
    console.log(distance);
});

answered May 2, 2016 at 22:53

Shady Alset

5,7044 gold badges24 silver badges36 bronze badges

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

1 Comment

Josh Over a year ago

Thank you, I think all I needed was another set of eyes on it :)

Collectives™ on Stack Overflow

Jquery not updating css onclick

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related