I have a problem with simple if/else statement that changes text color of a <p> element depending on the current color. I see why I get certain results but I can't seem to find a solution.

var test = 1;

function one() {  
    x.style.fontSize = "18px";
    x.style.color    = "black";
}

function two() {
    x.style.fontSize = "18px";
    x.style.color    = "red";
}

function three() { 
    var x = document.getElementById("demo");
    if (test % 2 == 0) {
        one();
    } else {
        two();
    }
    test = test + 1;
}

<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="three()">Click Me!</button>

I have a problem with simple if/else statement that changes text color of a <p> element depending on the current color. I see why I get certain results but I can't seem to find a solution.

var test = 1;

function one() {  
    x.style.fontSize = "18px";
    x.style.color    = "black";
}

function two() {
    x.style.fontSize = "18px";
    x.style.color    = "red";
}

function three() { 
    var x = document.getElementById("demo");
    if (test % 2 == 0) {
        one();
    } else {
        two();
    }
    test = test + 1;
}

<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="three()">Click Me!</button>

Any help for a newbie like me would be appreciated.

• javascript
• css
• if-statement
• onclick

• Function three is missing a terminating }. vfunction is not a valid Javascript keyword. Open your developer console (F12 in most browsers, Ctrl+Shift+I in Opera) and fix the errors. – Sverri M. Olsen Commented Oct 31, 2015 at 1:35
• I made a mistake copying code but fixing those two results in same way, thanks tho. – Martin Markovic Commented Oct 31, 2015 at 15:30

3 Answers 3

You can use getComputedStyle to get the element's color.

window.getComputedStyle(x, null).color

Since the value of the color property of your 'demo' element hasn't been initialized, it contains the default value of rgb(0, 0, 0) which corresponds to the color black.

See below for an example of toggling between two colors:

var black = 'rgb(0, 0, 0)';
var red = 'rgb(255, 0, 0)';

function toggleColor() {
  var x = document.getElementById("demo");
  var currentColor = window.getComputedStyle(x, null).color;

  if(currentColor === black) {
    x.style.color = red;
  } else {
    x.style.color = black;
  } 
}

<p id="demo">
  JavaScript can change the style of an HTML element.
</p>
<input type="button" onclick="toggleColor()" value="Toggle Color">

u can use a variable to cache current color, for example:

(function(){
  var color = 'red';

  var demoEl = document.getElementById("demo");
  demoEl.addEventListener('click', function(e) {
      if (color === 'red') {
          demoEl.style.color = 'black';
          color = 'black';    // set current color
      } else {
          demoEl.style.color = 'red';
          color = 'red';
      }
  }, false);
})();

<p id="demo">JavaScript can change the style of an HTML element.</p>

Use getComputedStyle, style is used for inline CSS.