How to change a CSS attribute by changing a global variable?

Question

I've got a button that when pressed changes a variable between true and false. When true I want the test to display blue, when false I want the text to display black. I'm not sure why but the text is staying blue, despite the variable changing. Here's my code:

<div id="test1">Hello</div>
<button onclick="change()">Change</button>

<script>

var swap = true;
function change(){
    if(swap === true){
        swap = false;
    }
    else{
        swap = true;
    }

    document.getElementById('test1').innerHTML = swap;  
}

if(swap === true){
    document.getElementById("test1").style.color = "blue";
}

else if(swap === false){
    document.getElementById("test1").style.color = "black";
}
</script>

Because the code to change the text color is only executed when the page loads. You need to move the code to set the color into the change() method. — Dan Saunders
– Dan Saunders, Commented Mar 11, 2015 at 14:29

Joe Fitter · Accepted Answer · 2015-03-11 14:30:00Z

1

Because the style change isn't within the function, so it is called once on page load but not when the button is clicked. Try moving the if/else condition within the function.

answered Mar 11, 2015 at 14:30

Joe Fitter

1,3097 silver badges11 bronze badges

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

Comments

dowomenfart · Accepted Answer · 2015-03-11 14:30:44Z

0

Why not get rid of the if and else if statement and put the logic in the change() function.

JSFIDDLE DEMO

var swap = true;

function change() {
    if (swap === true) {
        swap = false;
        document.getElementById("test1").style.color = "black";
    } else {
        swap = true;
        document.getElementById("test1").style.color = "blue";
    }

    document.getElementById('test1').innerHTML = swap;
}

answered Mar 11, 2015 at 14:30

dowomenfart

2,8132 gold badges17 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to change a CSS attribute by changing a global variable?

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