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
– Naruto Saitama, 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. — Naruto Saitama
– Naruto Saitama, Commented Jan 11, 2021 at 2:52
I have already update my question, can you make it check it again — Naruto Saitama
– Naruto Saitama, 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. — user202729
– user202729, Commented Jan 11, 2021 at 5:45

Love2Code · Accepted Answer · 2021-01-11 01:44:45Z

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

answered Jan 11, 2021 at 1:44

Love2Code

4806 silver badges21 bronze badges

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

Comments

gscHeartA · Accepted Answer · 2021-01-11 01:56:03Z

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, 2021 at 1:56

gscHeartA

444 bronze badges

5 Comments

Naruto Saitama Over a year ago

first, I think it was that simple but no luck. It not work.

gscHeartA Over a year ago

I tried some sample in my environment and maybe found the root cause.

gscHeartA Over a year ago

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 Over a year ago

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

Naruto Saitama Over a year ago

This means I have to compare with rgb instead of using #FFCB03 directly. Thank you so much.

Pushkin · Accepted Answer · 2021-01-11 01:50:45Z

-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, 2021 at 1:50

answered Jan 11, 2021 at 1:41

Pushkin

3,6441 gold badge19 silver badges36 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

5 Comments

Multiple modules

Same Module or file

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Multiple modules

Same Module or file

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related