CODEWITHSUNDEEP
javascripthtmlcssdomboolean
HYBR1D
HYBR1D

Reputation: 462

How to change a boolean value in JS?

I'm trying to make a button with two functions:

function bigfont()
{var font_is_small = true
if (font_is_small = true)
{document.getElementById('one').className=
document.getElementById('one').className.replace("font1","font2");
document.getElementById('two').className=
document.getElementById('two').className.replace("font1","font2");
document.getElementById('three').className=
document.getElementById('three').className.replace("font1","font2");
document.getElementById('four').className=
document.getElementById('four').className.replace("font3","font4"); 
font_is_small = true;}
if(font_is_small = false)
{document.getElementById('one').className=
document.getElementById('one').className.replace("font2","font1");
document.getElementById('two').className=
document.getElementById('two').className.replace("font2","font1");
document.getElementById('three').className=
document.getElementById('three').className.replace("font2","font1");
document.getElementById('four').className=
document.getElementById('four').className.replace("font4","font3");
font_is_small = true;}}

But the variable doesn't change. Could anybody help me?

Upvotes: 1

Views: 23974

Answers (3)

pawel
pawel

Reputation: 36965

To change a boolean to its opposite value you can use negation (!), for example x = !x means "set x to false if it's truthy or to true if it's falsy".
If you want the function to toggle between small and big font the simplest way is to place te variable outside of the function:
http://jsfiddle.net/zvoeLu9p/

var font_is_small = true;
function bigfont()
{
    font_is_small = !font_is_small; // switch the boolean
    if (font_is_small){ // no need for == true
        document.body.className=
        document.body.className.replace("font1","font2");
    }
     else { // no need for if condition
        document.body.className=
        document.body.className.replace("font2","font1");
    }
 }

Upvotes: 7

rfornal
rfornal

Reputation: 5122

It's where your variable is created and assigned, your equivalence in the if (= means assign) and you are setting it to true in BOTH if statements. ... try ...

var font_is_small = true;

Based on your usage, font_is_small should be a global, not passed in or created inside the function.

function bigfont() {
  if (font_is_small === true) {
    document.getElementById('one').className="font2":
    document.getElementById('two').className="font2":
    document.getElementById('three').className="font2":
    document.getElementById('four').className="font2":
    font_is_small = false;
  }
  if(font_is_small === false) {
    document.getElementById('one').className="font1":
    document.getElementById('two').className="font1":
    document.getElementById('three').className="font1":
    document.getElementById('four').className="font1":
    font_is_small = true;
  }
}

Also, the replace wasn't doing anything significant ... I figured out the two line formatting after fixing this ... this assignment is simpler and clearer.

Upvotes: 0

Ender
Ender

Reputation: 47

But you have the variable font_is_small in true all the time you have to change it to false in your code you don't do this.

Upvotes: 0

Related Questions