How to assign color to Javascript variable and use it throughout the Javascript code

Question

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.

I did that, I print the color as I declared, but it make my toggle not working. — Naruto Saitama, Jan 11 '21 at 02:44
Here is my code https://jsfiddle.net/szmnc4w8/ if you want me to clarify problem, I'm happy to. — Naruto Saitama, Jan 11 '21 at 02:52
I have already update my question, can you make it check it again — Naruto Saitama, Jan 11 '21 at 05: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](https://stackoverflow.com/questions/9421208/how-to-compare-colors-in-javascript) explains it much better. — user202729, Jan 11 '21 at 05:45

score 1 · Answer 1 · answered Jan 11 '21 at 01:44

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 :)

score 1 · Answer 2 · answered Jan 11 '21 at 01:56

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?

answered Jan 11 '21 at 01:56

gscHeartA

44
4

first, I think it was that simple but no luck. It not work. – Naruto Saitama Jan 11 '21 at 02:43
I tried some sample in my environment and maybe found the root cause. – gscHeartA Jan 11 '21 at 05:44
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 – gscHeartA Jan 11 '21 at 05:46
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)") – gscHeartA Jan 11 '21 at 05:48
This means I have to compare with rgb instead of using #FFCB03 directly. Thank you so much. – Naruto Saitama Jan 11 '21 at 06:05

Pushkin · Answer 3 · 2021-01-11T01:50:45.913

-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>

edited Jan 11 '21 at 01:50

answered Jan 11 '21 at 01:41

Pushkin

3,336
1
17
30

How to assign color to Javascript variable and use it throughout the Javascript code

3 Answers3

Multiple modules

Same Module or file