how to toggle css via jquery with the .css function

Question

the function is triggered via a button so I thought every time you push it will check x set the background accordingly and put x in the other state so the next push gives the other result

I just saw that I can use the .css in an .toggle but I'm still curious why my solution wont work

var x = 0;

function toggledark(x){
    if (x == 0) {
        $('body').css({'background-color': 'red'});
        x+=1;
        return x;
    }
    else {
        $('body').css({'background-color': 'black'});
        x-=1;
        return x;
    }
}

I thought it will toggle but I only get black and it stays this way

How are you calling this function? are you passing parameter x when function is called? If x is global then why x is a parameter? — Nawed Khan
– Nawed Khan, Commented Jan 17, 2019 at 23:00
The parameter x in toggledark(x) is shadowing the global variable x. — user5734311
– user5734311, Commented Jan 17, 2019 at 23:10
@ChrisG is right that the parameter in your function is overriding the global variable. Since triggered by a button, you're likely attaching it to a click listener, and the first parameter of the click listener is the event, so you're just renaming event as x. Just remove the x from your parameters, and you should be golden as is. jsfiddle.net/ntdh8v1w — user1189882
– user1189882, Commented Jan 17, 2019 at 23:23
thank you @ChrisG I thought I have to give it to the function — Hisfantor
– Hisfantor, Commented Jan 17, 2019 at 23:30

Mohamed-Yousef · Accepted Answer · 2019-01-17 23:11:44Z

no need for x as integer unless you have another actions to do .. But while you using red and black you can use it like this

var color = 'red';   // default background color
function toggledark(){
   color = (color == 'red') ? 'black' : 'red';
   $('body').css({'background-color': color });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggledark()">Toggle</button>

AND if you have another actions to do and you must use if statement for it you can use it like

var color = 'red';   // default background color
function toggledark(){
   color = (color == 'red') ? 'black' : 'red';
   $('body').css({'background-color': color });
   if(color == 'red'){
      console.log('Red Theme');
   }
   if(color == 'black'){
      console.log('Black Theme');
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggledark()">Toggle</button>

Patrik Alexits · Accepted Answer · 2019-01-17 23:11:16Z

0

NOTE: I don't think this is a good solution, I would do it with classes, but I'll provide the code for your question if you want to do it this way

Here is the working code: http://jsfiddle.net/8ygrebp2/3/

I would do it like that since you are using Jquery:

HTML:

<button class="toggle">
Click me
</button>

JQuery:

var x = 0;

$('body').on('click', '.toggle', function(){
    if(x == 0){
        $('body').css('background-color', 'black');
    x+=1;
  } else {
    $('body').css('background-color', 'red');
    x-=1;
  }
});

edited Jan 17, 2019 at 23:11

answered Jan 17, 2019 at 23:05

Patrik Alexits

1,00710 silver badges25 bronze badges

Collectives™ on Stack Overflow

how to toggle css via jquery with the .css function

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