How can I make my Background change on click using hexadecimal color codes?

Question

How can I make my Background change on click using hexadecimal color codes?

I am struggling with changing the background color of an html document using a button click.

While colors like "yellow, "blue", and "red" work perfectly, I encounter an issue when trying to use hexadecimal colors such as "#000000".

The if-condition doesn't seem to recognize the hexadecimal color and defaults to the else function instead.

Interestingly, substituting "#000000" with "black" makes the function work as intended and the background turns red.

If you would like to see the code in action, check out the working sample on jsfiddle:

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>

javascript if-statement

Answer 1

Answer №1

There are numerous variations in string representations for a single color, so relying solely on matching the hex color string may not be effective since it might not reflect what your browser is actually using:

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

It's advisable to avoid direct color matching whenever possible; different browsers may interpret colors differently, hence converting from hex to rgb won't always yield accurate results. Instead, assign a specific classname to the element that defines the required colors and check for the presence of that classname:

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 absolutely have to match a color, the safest approach would be to create a temporary element with the same background color, extract the color from both elements, and compare them to ensure accuracy across different string representations used by various browsers.

Answer 2

There are numerous variations in string representations for a single color, so relying solely on matching the hex color string may not be effective since it might not reflect what your browser is actually using:

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

It's advisable to avoid direct color matching whenever possible; different browsers may interpret colors differently, hence converting from hex to rgb won't always yield accurate results. Instead, assign a specific classname to the element that defines the required colors and check for the presence of that classname:

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 absolutely have to match a color, the safest approach would be to create a temporary element with the same background color, extract the color from both elements, and compare them to ensure accuracy across different string representations used by various browsers.

How can I make my Background change on click using hexadecimal color codes?

Answer №1

Similar questions

The post request with Postman is functional, however the AJAX post request is not working. I have thoroughly reviewed the client-side JavaScript

At times, Express.js may display an error message stating "Cannot GET /"

Generating dynamic @returns annotations in JSDoc based on the value of @param

Utilizing the getJSON Method to Automatically Fill a Dropdown Selection Element

working with json files in node.js

What is the best way to define the relative path and folder paths in HTML and CSS when working in Visual Studio 2012?

Express application failed to deploy due to boot timeout error R10

The property 'apply' is trying to be accessed but is undefined and cannot be read

Placing a new item following each occurrence of 'X' in React components

Verify if the form has been refreshed in React JS

Ways to emphasize an HTML element when clicked with the mouse

Why are the indicators and controls for Twitter-Bootstrap 5 carousel not functioning properly?

Deactivate numerous buttons with the help of jQuery

Discovering the point of exit for a mouse from an image

What is the process behind Stackoverflow's "Congratulations, you've earned a new badge" popup window?

Navigating the rollout of a fresh new design

Simple steps to trigger a PHP page from a JavaScript page by utilizing express functions

Determining the percentage between two elements using Bootstrap 4's range slider

`Javascript often returns NaN for basic calculations`

The classification of rejected promises in Typescript