CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jacob Reisner
Jacob Reisner

Reputation: 162

How to make jQuery variable toggle buttons?

I'm making an app where you can customize the opacity of different elements. The app has simple "up" and "down" buttons, for increasing and decreasing opacity. However, the toggle functions are not implementing in my css. Here's my HTML:

<div id="container">Make me lighter.</div>
<br>
<br>
<button id="up">up</button>
<br>
<button id="down">down</button>

CSS:

* {
     margin: 0px;
     padding:0px
}

#container {
     padding: 10px;
     border: 10px solid;
}

And jQuery:

$(document).ready(function () {
    var x = 0.5;

    $("#up").click(function () {
        var x = x += 0.2;
    });
    $("#down").click(function () {
        var x = x -= 0.2;
    });

    $("#container").css({
        'opacity', x
    });
});

This is the Fiddle: http://jsfiddle.net/j96bu778/1/

I've spent a lot of time looking up questions on Stack Overflow, and most of the answers were too confusing to understand. JQuery API didn't help me that much either.

Thanks so much for the help.

Upvotes: 2

Views: 162

Answers (5)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Find here UPDATED FIDDLE.

Replace :

$("#up").click(function () {
     var x = x += 0.2;
});

By :

$("#up").click(function(){
    x += 0.2;    
    $("#container").css('opacity', x);
});

And same for #down, Because if $("#container").css('opacity', x); still outside of the click event, it was called just the first time on load of page.

Full JS :

$(function() {
    var x = 0.5;

    $("#up").click(function(){
        x += 0.2;    
        $("#container").css('opacity', x);
    });

    $("#down").click(function(){
        x -= 0.2;    
        $("#container").css('opacity', x);
     });
});

Hope this helps.

Upvotes: 0

Jrey
Jrey

Reputation: 1638

your jquery should like this...

since you set your var x as global variable, you don't need to declare it again.

$(document).ready(function() {
        var x = 0.5;
        $("#up").click(function(){
           x += 0.2;
           $("#container").css('opacity', x);
         });
        $("#down").click(function(){
            x -= 0.2;
           $("#container").css('opacity', x);
         });

    });

Upvotes: 0

Nathan Tuggy
Nathan Tuggy

Reputation: 2244

You never update the CSS in the click events, so it stays with the original value of x.

Also, you're not using closures right, since you're redeclaring and reinitializing x in each scope rather than allowing it to reference the variable in the parent scope.

Finally, you're using the wrong syntax for css calls (and object notation); just use the 'property', value parameter notation without wrapping them.

Untested correction for all these problems:

$(document).ready(function () {
    var x = 0.5;
    $("#up").click(function () {
        x = x += 0.2;
        $("#container").css('opacity', x);
    });
    $("#down").click(function () {
        x = x -= 0.2;
        $("#container").css('opacity', x);
    });

    $("#container").css('opacity', x);
});

Upvotes: 1

heartyporridge
heartyporridge

Reputation: 1201

There are a number of things wrong with your code (but don't be discouraged!):

  1. var x = x += 0.2; is probably not the kind of assignment you're trying to do. This increments x by 0.2, then assigns a new local variable x to the value of the evaluated x. Since x it accessible from the scope of the callback functions, just use x += .2.
  2. { 'opacity', x } in the css function argument is not valid object notation. You're looking for { opacity: x }.
  3. You need to set the CSS of the elements when the buttons are pressed. By omitting that from the event callbacks, your buttons don't do anything. I've moved $("#container").css({opacity: x}); inside those callback functions.

Now fixed:

$(document).ready(function() {
    var x = 0.5;
    $("#up").click(function(){
        x += .2;
        $("#container").css({opacity: x});
     });
    $("#down").click(function(){
        x -= .2;
        $("#container").css({opacity: x});
     });
});

Check out a working demo here: JSFiddle

I strongly recommend you do some reading on Javascript before diving into jQuery, as you'll have a much better understanding of how the language works.

Upvotes: 4

Kevin Simple
Kevin Simple

Reputation: 1213

Mate, it's because you never change the css when click event occurs,

I updated your code, and it's working, check this 

 $("#up").click(function(){
     x += 0.2;
     $("#container").css('opacity', x);
 });

http://jsfiddle.net/j96bu778/6/

Upvotes: -1

Related Questions