JavaScript Increment ++ Opacity On each Click

Question

Hi i am having trouble incrementing the opacity of a background-color:hsla() div using JavaScript. This is the code i am using...

$( "#Opacity" ).button().click(function() {
var x = 0.1;
var Opacity = ++x;
$( "#TimeDate, #Weather, #ticker, #Pages" ).css( "background-color", "hsla(0,0%,0%,"+Opacity +")" );
        Cookie.set('bgo', $('#TimeDate, #Weather, #ticker, #Pages').css('background-color'), 365);
        return false;
});

The end result I would like is for the opacity to start off at the previous setting and then for it to increase by 0.1 every time the button is clicked until it reaches 1 then for it to return to 0 and then start increasing by 0.1 on each click again and so forth.

Thanks in advance, Chris

Answer 1

Using this code opacity is always 1.1

Correct the function to the below:

Opacity = 0.1

$( "#Opacity" ).button().click(function() {

    Opacity = (Opacity==1) ? 0 : (Opacity + 0.1);
    $( "#TimeDate, #Weather, #ticker, #Pages" ).css( "background-color", "hsla(0,0   %,0%,"+Opacity +")" );
    Cookie.set('bgo', $('#TimeDate, #Weather, #ticker, #Pages').css('background-color'), 365);
    return false;
});