Why will my not Background change on click with hexadecimal colors?

Question

I have an html document where i wanted to change the background color of the document by clicking on a button.

This works totally fine as long as i am using colors like "yellow, "blue", "red", etc.

But when i am using hexadecimal colors like "#000000" the if-condition doesnt seem to notice, that color and uses the else function.

If i use "black" instead of "#000000" the function works and the background turns red.

I've uploaded the working sample on jsfiddle.

Do you know where the mistake is?

https://jsfiddle.net/c2gv9x01/

<button>COLOR SWITCH</button>



<script>
window.onload=function(){
    document.querySelector("body").style.backgroundColor = '#000000';
    document.querySelector("button").addEventListener("click", color);
}

function color() {

    if (document.querySelector("body").style.backgroundColor == '#000000') 
{document.querySelector("body").style.backgroundColor = 'red'; }


     else {document.querySelector("body").style.backgroundColor = '#000000';}
}
</script>

@gautam1168 Thanks, but in your version the if-condition works with the word 'black'. If I put in a hex number, it wont work again. — konny, Feb 04 '19 at 13:06
You have to parse the color into a uniform rgb format. You can use a library like (https://github.com/deanm/css-color-parser-js) — gautam1168, Feb 04 '19 at 13:09
Here is your fiddle with color parser https://jsfiddle.net/jqvo7dp5/ . With this you can set the color as 'black' or '#000' or '#000000'. As long as you parse the color before checking it will work. — gautam1168, Feb 04 '19 at 13:14
OK, thank you! The rgb solution worked for me! So is the answer that I have to use the same format for alle colors? Or is there a problem with the hex-format? — konny, Feb 04 '19 at 13:21

Daniel Beck · Accepted Answer · 2019-02-04T13:27:07.133

There are many different string representations for the same color, so simply matching the hex color string won't necessarily work as that amy not be what your browser is using to report it:

window.onload = function() {
  let body = document.querySelector("body")
  body.style.backgroundColor = "#000000"
  console.log(body.style.backgroundColor) // rgb(0, 0, 0) in most browsers
}

When possible, avoid trying to match colors at all; not all browsers will use the same representation, so just switching to rgb instead of hex won't be guaranteed to work. Instead set a classname on the element which sets the colors you need, and test for the presence of that classname instead:

window.onload = function() {
  document.querySelector("body").classList.add("black")
  document.querySelector("button").addEventListener("click", color);
}

function color() {
  let body = document.querySelector("body")
  if (body.classList.contains("black")) {
     body.classList.add("red")
     body.classList.remove("black")
  } else {
     body.classList.add("black")
     body.classList.remove("red")
  }
}

.black {
  background-color: #000
}

.red {
  background-color: #F00
}

<button>COLOR SWITCH</button>

If you need to match a color, the safest way is to create a temporary element with the same background color, read the color from both that element and the one you're examining, and compare to see if they're the same; that will work regardless of the string representation the browser happens to be using.

I wanted to change the colors of several Elements on a website. Such as SVG´s and Background colors. So thats why i have to change specific colors of Elements. — konny, Feb 04 '19 at 14:02
That shouldn't make any difference; the same technique I showed here can be used on any element, not just the document body. — Daniel Beck, Feb 04 '19 at 14:10
(If you need to style parts of an svg rather than the whole thing, [see here](https://stackoverflow.com/a/34284230/3412322).) — Daniel Beck, Feb 04 '19 at 14:11
ok perfect, this really seems like the more efficient way, thanks! — konny, Feb 04 '19 at 14:22

Why will my not Background change on click with hexadecimal colors?

1 Answers1