CODEWITHSUNDEEP
jqueryhtml
Josh
Josh

Reputation: 103

Jquery not updating css onclick

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.

Upvotes: 0

Views: 78

Answers (1)

Shady Alset
Shady Alset

Reputation: 5714

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);
});

Upvotes: 3

Related Questions