How to change a boolean value in JS?

Question

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?

Change `if (font_is_small = true)` to `if (font_is_small === true)` — PeterVC, Dec 06 '14 at 18:55
Also see this SO post : http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons — nha, Dec 06 '14 at 18:56
Or just leave it out. `if (font_is_small) { ... }` and `if (!font_is_small) { ... }` are actually much more readable. — Max Truxa, Dec 06 '14 at 18:57

pawel · Accepted Answer · 2014-12-06T19:12:35.820

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

score 1 · Answer 2 · answered Dec 06 '14 at 18:58

1

You have a syntax error:

{var font_is_small = true; //<---- right here you forgot a ;
if (font_is_small == true)//<-- you forgot equal to operators on all if statements

and what is this???!??

document.getElementById('two').className= //<--- blank? the program will be doing this:
document.getElementById('one').className=document.getElementById('one').className.replace("font2","font1");

answered Dec 06 '14 at 18:58

Evolve Digital

140
1
1
8

I don't really know. i'm kinda new to javascript and looked on the internet for something to change html classes and this is the only method that worked. – HYBR1D Dec 06 '14 at 19:20
1

the code is supposed to change the font classes back and forward. my code, however, doesn't change the variable from true to false. it still makes the fonts bigger but it doesn't make them smaller because the variable doesn't change. if i try your suggestion, the fonts don't change at all. the code simply stops working. – HYBR1D Dec 06 '14 at 19:24

score 0 · Answer 3 · answered Dec 06 '14 at 18:57

0

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.

answered Dec 06 '14 at 18:57

Ender

47
10

this should be a comment, not an answer. – pawel Dec 06 '14 at 19:06

score 0 · Answer 4 · answered Dec 06 '14 at 18:58

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.

How to change a boolean value in JS?

4 Answers4