CODEWITHSUNDEEP
javascripttextcolors
Jonathan Foster
Jonathan Foster

Reputation: 39

Changing Text Color On Click

I'm trying to change the text from black to blue when I click. I have it as an "if" statement and I know it doesn't need to be an "if" statement, but I'm just wondering why it doesn't work. I'm just asking, "If this color is black, change it to blue."

var myvar = document.getElementById('thisdiv');

myvar.onclick = function myfunction() {
  if (myvar.style.color == "#000000") {
    myvar.style.color = "#0000FF";
  }
}
.mydiv {
  height: 200px;
  width: 200px;
  background-color: red;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
<div class="mydiv" id="thisdiv">Click Me</div>

JSFiddle

I'm not really looking for a solution to make it go from black to blue as I'm sure there's other ways I could figure out to do it, but more just wondering why the way I have it isn't working.

Upvotes: 0

Views: 113

Answers (3)

gedc
gedc

Reputation: 91

I strongly suggest using an additional class for this, to account for its state. 

var myvar = document.getElementById('thisdiv');

myvar.onclick = function myfunction() {
    /* if (myvar.className === ""){
        myval.className = "active";
    } else {
        myvar.className = "";
    } */
    // Same as below, toggle the class of #thisdiv from active to blank
    myvar.className = myvar.className === "" ? "active" : "";
}



.mydiv {
  height: 200px;
  width: 200px;
  background-color: red;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.mydiv.active{
  color: #0000ff;
}

You could also probably make use of the :visited pseudo selector and get rid of the click function entirely. You'd need to make your div one big link though. Something like this;

<a class="mydiv" id="thisdiv">Click Me</a>

.mydiv{
  display:block; /* since it's a link and will be inline by default */
}
.mydiv:visited{
  color: #0000ff;
}

Upvotes: 0

kamoroso94
kamoroso94

Reputation: 1735

Okay, so the reason the code is not working is because myvar.style.color is undefined. When you use a stylesheet, it doesn't affect the JavaScript style properties, which should be the same as the styles defined in the style attribute of the element. What you want is something like the following.

// undefined!="#0000ff", success
if(myvar.style.color!="#0000ff") {
    myvar.style.color = "#0000ff";
}

If you want to use JQuery, you can try something like the following.

// JQuery always returns opaque colors in rgb(r, g, b) form
// regardless of the original format.
if($(myvar).css("color")=="rgb(0, 0, 0)") {
    myvar.style.color = "#0000ff";
}

Upvotes: 0

castletheperson
castletheperson

Reputation: 33466

style only holds styles that were added using the style attribute in the HTML. It doesn't contain the computed style from applying <style> tags or stylesheets.

To get the computed style, use window.getComputedStyle(). Note this is read-only.

var myvar = document.getElementById('thisdiv');

myvar.onclick = function myfunction() {
  if (window.getComputedStyle(myvar).color === "rgb(0, 0, 0)") {
    myvar.style.color = "#0000FF";
  }
}
.mydiv {
  height: 200px;
  width: 200px;
  background-color: red;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
<div class="mydiv" id="thisdiv">Click Me</div>

A better strategy though is to add or remove CSS classes to elements, so that you get separate presentation from functionality.

Upvotes: 3

Related Questions