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
– PeterVC, Commented Dec 6, 2014 at 18:55
Also see this SO post : stackoverflow.com/questions/359494/… — nha
– nha, Commented Dec 6, 2014 at 18:56
Or just leave it out. if (font_is_small) { ... } and if (!font_is_small) { ... } are actually much more readable. — Max Truxa
– Max Truxa, Commented Dec 6, 2014 at 18:57

pawel · Accepted Answer · 2014-12-06 19:12:35Z

7

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

edited Dec 6, 2014 at 19:12

answered Dec 6, 2014 at 19:04

pawel

37.1k7 gold badges59 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ender · Accepted Answer · 2014-12-06 18:57:45Z

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 6, 2014 at 18:57

Ender

4710 bronze badges

1 Comment

pawel Over a year ago

this should be a comment, not an answer.

bob-fornal · Accepted Answer · 2014-12-06 18:58:03Z

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.

Collectives™ on Stack Overflow

How to change a boolean value in JS?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related