document.getElementById changing color with variables

Question

I'm using document.getElementById("banner").style.backgroundColor = COLOR to change something with cookies. I take the cookie and read it, and put the string into a variable (Ex: var backgroundcolor = "red") How would I put that into the COLOR slot as I don't know how to put a variable where COLOR is.

Heres my full code:

<script>
            function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
function checkCookie() {
  var bannerlinkcolor = getCookie("bannertheme");
  if (bannerlinkcolor = 0) {
      var textcolor = "#000000";
      var bgcolor = "#ff0000";
  } else {
    var textcolor = "#FFFFFF";
      var bgcolor = "#800080";

  }
}
        </script>
        <script>
document.getElementById("banner").style.color = textcolor;
            document.getElementById("banner").style.backgroundColor = bgcolor;
</script>
    </head>
    <body>
            <div id="banner" style="border:2px dotted orange; height:20px; width:100%; "><center>Check out our <a href="https://www.youtube.com/channel/UC4Eg3V26uXxWY-M639mGDrQ" target="_blank">Youtube</a> Channel! &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Help reinstate Net Neutrality! Visit <a href="https://www.battleforthenet.com/" target="_blank">https://www.battleforthenet.com/</a>!!<center></div>
        </body>    
</html>

(I left out the top because that had some Google Analytics stuff)

Heres where I store the cookie data:

function switchTheme(e) {
    if (e.target.checked) {
    var r = confirm("Are you sure you want to switch on light mode? (It hurts my eyes)");
    if(r == true) {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light'); //add this
        setCookie("bannertheme", 1, 1);
        }else {
        toggleSwitch.checked = false;
        }
    }
    else {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark'); //add this
        setCookie("bannertheme", 0, 1);
    }    
}

The toggling thing is activated by a switch

I've tried these two things and neither works:

document.getElementById("banner").style.backgroundColor = var(bgcolor);

document.getElementById("banner").style.backgroundColor = bgcolor;

document.getElementById("banner").style.backgroundColor = VARIABLE_HERE;

I need it to change the color of banner to purple

You're assigning the value to a variable you're not using. Try `var bgcolor = "red"` instead, and use the second example. — Andy, Sep 08 '19 at 18:48
I don't really see how cookies play into this. When you set `var backgroundColor = 'red';`, that has nothing to do with cookies. An example of how to set the element's colour to purple would be `document.getElementById('banner').style.backgroundColor = '#800080';` — Gershom Maes, Sep 08 '19 at 18:49
I need to use cookies because I'm taking an output from a separate file when the user switches the theme — , Sep 08 '19 at 18:59

Pushprajsinh Chudasama · Answer 1 · 2019-09-08T20:02:11.343

2

You can simply do it using the following snippet .

var purple = //get cookie code 
document.getElementById("banner").style.backgroundColor = purple;

UDATED
Don't use the two different scripts to tag include all the thing in single script .
Check out my code

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body >

    <div id="banner" style="border:2px dotted orange; height:20px; width:100%; "><center>Check out our <a href="https://www.youtube.com/channel/UC4Eg3V26uXxWY-M639mGDrQ" target="_blank">Youtube</a> Channel! &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Help reinstate Net Neutrality! Visit <a href="https://www.battleforthenet.com/" target="_blank">https://www.battleforthenet.com/</a>!!<center></div>

    </body>
    </html>

</body>
</html>

<script>
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    function checkCookie() {
        var textcolor = "";
        var bgcolor = "";
        var bannerlinkcolor = getCookie("bannertheme");
        if (bannerlinkcolor == 0) {
             textcolor = "#000000";
             bgcolor = "#ff0000";
        } else {
             textcolor = "#FFFFFF";
             bgcolor = "#800080";

        }
        document.getElementById("banner").style.color = textcolor;
        document.getElementById("banner").style.backgroundColor = bgcolor;

    }
</script>

edited Sep 08 '19 at 20:02

answered Sep 08 '19 at 18:50

Pushprajsinh Chudasama

7,772
4
20
43

Do I set the cookie to the hex value? (var purple = #800080) – Sep 08 '19 at 19:03
You can do it like `var purple = "#800080";` @TabulateJarl8 – Pushprajsinh Chudasama Sep 08 '19 at 19:05
Yes you can . you can edit your question and put the code over there . – Pushprajsinh Chudasama Sep 08 '19 at 19:09
Hold on a second. I just realized that I never executed my cookie functions. Let me see if that fixes anything. – Sep 08 '19 at 19:17
You can also check my updated code and do the required changes related to your function call in my code . @TabulateJarl8 – Pushprajsinh Chudasama Sep 08 '19 at 19:19
Everything is still broken. I'm gonna try to use sessionStorage now just in case my cookie scripts are broken. – Sep 08 '19 at 19:24
When you are clling your function ? `checkCookie()` @TabulateJarl8 – Pushprajsinh Chudasama Sep 08 '19 at 19:25
Yes. I am calling my function checkCookie() – Sep 08 '19 at 19:27
My question is when ? Are you getting the proper value from cookie in `bannerlinkcolor` variable ? If you are getting correct value in `bannerlinkcolor ` variable then the above code must run perfect . @TabulateJarl8 – Pushprajsinh Chudasama Sep 08 '19 at 19:29
Do `console.log()` and check in your dev-console *(open using F12)* that the value of `bannerLinkcolor` . So that we can get to know that is the problem is regarding to `cookie` or with setting backgroud color . @TabulateJarl8 – Pushprajsinh Chudasama Sep 08 '19 at 19:38
I couldn't get console.log to work, but there was an error in the chrome dev console. This is it: banner.html:66 Uncaught TypeError: Cannot read property 'style' of null at banner.html:66 – Sep 08 '19 at 19:49
Fixed that error, now I'm getting this: Uncaught ReferenceError: textcolor is not defined at banner.html:72 – Sep 08 '19 at 20:00
Try Out my updated code . @TabulateJarl8 . Changes made only in `checkCookie()` function – Pushprajsinh Chudasama Sep 08 '19 at 20:03
Also change your if statement from `if(bannerlinkcolor = 0)` to `if(bannerlinkcolor == 0)` @TabulateJarl8 – Pushprajsinh Chudasama Sep 08 '19 at 20:05
It worked! So I guess it was the cookie script that was broken. Now I just have to figure out how to make it update without me reloading – Sep 08 '19 at 20:22
please Upvote And accept if my answer helps you to solve my problem . Thank you . @TabulateJarl8 – Pushprajsinh Chudasama Sep 08 '19 at 20:24

score 0 · Accepted Answer · answered Sep 08 '19 at 19:00

0

To store styling data it is better to use sessionStorage instead of cookies.

sessionStorage.setItem('myBackgroundColor', 'red');

var backgroundColor = sessionStorage.getItem('myBackgroundColor');

document.getElementById("banner").style.backgroundColor = backgroundColor;

answered Sep 08 '19 at 19:00

tom

9,550
6
30
49

Does that work in between files? (I'm like 99% sure that it does but I just want to make sure) – Sep 08 '19 at 19:10
Yes of course. It does not between different browser sessions. – tom Sep 08 '19 at 19:11
Ok. I'll implement that after I fix this problem. Thanks! – Sep 08 '19 at 19:15

score 0 · Answer 3 · answered Sep 08 '19 at 20:00

Well it seems pretty easy one you done it, right as all trivial realities of life. So here is the walk through.

In JS LHS = RHS,
LHS is object reference and RHS is value assigned to that reference.
RHS can be string or reference to another object which has value.

EXAMPLE

var abc = 123;

var def = abc;

There is no rule saying how this cannot be applied to your scenario;

var colorcode = "#000000";
var colorname = "black";

document.getElementById("banner").style.backgroundColor = colorcode; 
document.getElementById("banner").style.backgroundColor = colorname;

So our intention is to make the LHS = RHS equation fit the bill.

Suppose we we have cookie created in all its manifestation.

document.cookie = "colorcode=#000000";

or

document.cookie = "colorcode=black";

That is the easy part but when it comes to retrieving the cookie by name you have to run a mile or two before you can reach the point.

First get collection of all the cookies

var allcookies = document.cookie;

This comes in a string like fashion as in below example;

__utmc=264131991; __utma=264131991.1393864252.1562868442.1567905512.1567968949.26; __utmz=264131991.1567968949.26.13.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided); __utmb=264131991.1.10.1567968949; colorcode=#000000;

We have to convert it into array by split function as following;

var cookiearray = allcookies.split(';');

Now we can travel around the array via for loop (its much faster) and retrieve our value;

for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  if (name = "colorcode") {
                  var colorvalue = value; 
                  }

               }

Created colorvalue which captures the value if name matches.

Now we can use LHS = RHS to set value for background colour.

document.getElementById("banner").style.backgroundColor = colorvalue;

there is no hindrance to place above code directly into for loop inside if condition.

How ever it is not reusable. Thus we have to resort to function as exemplified by W3 Schools.

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
document.getElementById("banner").style.backgroundColor = getCookie("colorcode");

Function takes the argument, creates local variable inside function, then collects and splits the cookie collection into array.

It then runs a loop with nested while until condition meets as the first character of each array value, which is white space.

In side while loop, it creates a new variable by substring() method extracting all characters from string other than 1st character, which in our case is white space.

once done in while loop in next step of parent for loop it runs indexof method as truthy.

If true return value again using sub-string value.

Is this the most elegant method probably not, but either which way you will have to run above number of steps before getting value from cookie.

If you have provision why not run the same through local storage.

localStorage.setItem("colorcode", "#000000");

 document.getElementById("banner").style.backgroundColor = localStorage.getItem("colorcode");

Saves you bit of headache.

If you are to use session storage, they limited to current tab only. If tab closed data is lost. Each tab has its own session. Current tab + current web page only. Local storage is persistent until you explicitly destroy it. https://stackoverflow.com/a/5523174/10588650 — Syed, Sep 08 '19 at 20:04

document.getElementById changing color with variables

3 Answers3