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 0 · Answer 2 · 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 3 · 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?

3 Answers3