Как изменить атрибут CSS, изменив глобальную переменную?

Question

У меня есть кнопка, которая при нажатии меняет переменную между true и false. Когда true, я хочу, чтобы тест отображался синим, когда false, я хочу, чтобы текст отображался черным. Я не уверен, почему, но текст остается синим, несмотря на изменение переменной. Вот мой код:

<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> 

Answer 1

Поскольку изменение стиля не внутри функции, поэтому она вызывается один раз при загрузке страницы, но не тогда, когда кнопка нажата. Попробуйте переместить условие if/else внутри функции.

Answer 2

Почему бы не избавиться от инструкции if и else if и поместить логику в функцию change().

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