1

I want to assign the #FFCB03 to a javascript variable and use it. Below is my code

let btn_all = document.getElementById("btn_all"); let btn_A = document.getElementById("btn_A"); let btn_B = document.getElementById("btn_B"); let btn_C = document.getElementById("btn_C"); btn_A.style.backgroundColor = "red"; let allButtons = [btn_all, btn_A, btn_B, btn_C]; function changeColor(e) { let currentColor = e.target.style.backgroundColor; if (currentColor != "red") { e.target.style.backgroundColor = "red"; } else { e.target.style.backgroundColor = ""; } if (btn_A.style.backgroundColor == "red" && btn_B.style.backgroundColor == "red" && btn_C.style.backgroundColor == "red") { btn_all.style.backgroundColor = "red"; } else { btn_all.style.backgroundColor = ""; } if (btn_A.style.backgroundColor == "" && btn_B.style.backgroundColor == "" && btn_C.style.backgroundColor == "") { btn_A.style.backgroundColor = "red" } }

Instead of use "red" color I want to use this "#FFCB03" color by assign it to a varible. Like this: let bgColor = "#FFCB03"; and replace it in my function, but this make my function not working as when I use "red". Even I replace "#FFCB03" directly to where "red" is, it make my function not working too.

UPDATE This code is work just like what I want it to. One thing that I want to add to the code is I want to make "red" color to another color just like "#FFCB03". but when I replace the "red" color with this "#FFCB03", it make my code not working as before.

Improve this question
4
  • I did that, I print the color as I declared, but it make my toggle not working. Commented Jan 11, 2021 at 2:44
  • Here is my code jsfiddle.net/szmnc4w8 if you want me to clarify problem, I'm happy to. Commented Jan 11, 2021 at 2:52
  • I have already update my question, can you make it check it again Commented Jan 11, 2021 at 5:36
  • Okay -- anyway, if you just add a console.log into that you'll see that the color is normalized to rgb(...), but html - How to compare colors in JavaScript? - Stack Overflow explains it much better. Commented Jan 11, 2021 at 5:45

3 Answers 3

Reset to default
1

It is very simple to accomplish this. I will use this code as an example.

<div class = "example-container"></div> <script> const red = "#FFCB03"; //store desired color in the variable const div = document.querySelector(".example-div"); div.style.backgroundColor = red; //assign it

tada :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You could use the code like this:

let red = "#FFCB03"; e.target.style.backgroundColor = red;

and here is the code changed from your code

let btn_all = document.getElementById("btn_all"); let btn_A = document.getElementById("btn_A"); let btn_B = document.getElementById("btn_B"); let btn_C = document.getElementById("btn_C"); let red = "#FFCB03"; btn_A.style.backgroundColor = red; let allButtons = [btn_all, btn_A, btn_B, btn_C]; function changeColor(e) { let currentColor = e.target.style.backgroundColor; if (currentColor != red) { e.target.style.backgroundColor = red; } else { e.target.style.backgroundColor = ""; } if (btn_A.style.backgroundColor == red && btn_B.style.backgroundColor == red && btn_C.style.backgroundColor == red) { btn_all.style.backgroundColor = red; } else { btn_all.style.backgroundColor = ""; } if (btn_A.style.backgroundColor == "" && btn_B.style.backgroundColor == "" && btn_C.style.backgroundColor == "") { btn_A.style.backgroundColor = red } }

Could this code solve your problem?

Improve this answer

5 Comments

first, I think it was that simple but no luck. It not work.
I tried some sample in my environment and maybe found the root cause.
When you click the button "all" you will execute a code : xxx.style.backgroundColor But this code will output the result : "rgb(255, 203, 3)" So it will not output the "#FFCB03" but a new rgb format. Maybe you should compare the color with "rgb(255, 203, 3)" and try again
let currentColor = e.target.style.backgroundColor; if (currentColor != "red") Above is the issue position, maybe you should change it to let currentColor = e.target.style.backgroundColor; if (currentColor != "rgb(255, 203, 3)")
This means I have to compare with rgb instead of using #FFCB03 directly. Thank you so much.
-1

Create a new file as colors.js or something and store and export the values from there

Multiple modules

 export const red = `#FFCB03`;

other files

import { red } from './colors' btn_A.style.backgroundColor = red

Same Module or file

In case of same file, just declare the variable and use it

 <script> const red = `#FFCB03`; btn_A.style.backgroundColor = red </script>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.