is there a way to place a variable as the value in HTML?

Question

I am working on a simple side project and can't figure out how to put the "varColor" variable's value as the background color of a web page. (I omitted the lightswitch portion of the code because it is functional)

I tried many different ways to call the value but haven't gotten any results yet.

okay, so I tried lots of methods from the answers and can't seem to get it to react based off the light switch's value. some help on that too?

<head>  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <p id="varColor"></p>

  <script>
  window.onload
  var color = "white"
  if(id.lightSwitch == true)
  {
      var color = "white";
  }
  if(id.lightSwitch == false){
      var color = "black";
  }

  document.getElementById("varColor").innerHTML = color;
</script>

    <title>Link catalog</title>
    <style>
    body {
    background-color: color;
}
</style>
  </head>



<font style= "color:#ffffff"><i>lightSwitch</i></font>
        <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="lightSwitch">
        <label class="onoffswitch-label" for="lightSwitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>

the new code is in the same location in comparison to the original file, on the bottom of the page.

yes I am aware the words aren't visible while the page is white, I'll fix that after I get the switch functional.

Are you trying to just change the colour of the `` element, it are you really trying to insert the changed value into the CSS (for whatever reason)? — David Thomas, Jan 09 '20 at 13:21
Does this answer your question? [How do I change the background color with JavaScript?](https://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript) — Devinloper, Jan 09 '20 at 13:30
I am trying to avoid using CSS altogether, and making a simple offline page of my own sake, using straight inline script and no external files. I hope this makes more sense. — Jaz, Jan 10 '20 at 15:37
now that I see what's missing, I am really having issues with **IDENTIFYING** the light switch, not the background color changing! what can I do to check the light switch for when it is true or false? — Jaz, Jan 10 '20 at 18:56

score 3 · Answer 1 · answered Jan 09 '20 at 13:18

3

You can update its style like this:

document.querySelector('#varColor').style.background = color;

You do NOT need to call window.location.reload();

answered Jan 09 '20 at 13:18

Sxribe

819
7
16

score 2 · Answer 2 · answered Jan 09 '20 at 13:50

Simply you can define a variable in Javascript like: var varColor = gray

and then assign this variable varColor to set background-color of HTML document like document.body.style.background = varColor

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Your body content goes here.</h1>
    <script>
        var varColor = "yellow";
        document.body.style.background = varColor;
    </script>
</body>
</html>

Devinloper · Answer 3 · 2020-01-09T13:35:26.603

To set the background color of the html body you can use:

document.body.style.backgroundColor = color;

To set the background color of the varColor element you can use:

document.getElementById('varColor').style.backgroundColor = '#000';

For your example I believe should be, this will set the color to green:

Since JavaScript is run in the client, there is no need to run window.location.reload.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <p id="varColor">green</p>

  <script>
    window.onload
    var color = "white"
    if (id.lightSwitch == true) {
      var color = "white";
    }
    if (id.lightSwitch == false) {
      var color = "black";
    }

    color = document.getElementById("varColor").innerHTML;
    document.body.style.backgroundColor = color;
  </script>

  <title>Link catalog</title>
  <style>
    body {
      background-color: __VARIABLE HERE__;
    }
  </style>
</head>

score -1 · Answer 4 · answered Jan 09 '20 at 13:21

-1

You can use: document.getElementsByTagName("BODY")[0].style.backgroundColor = color;

answered Jan 09 '20 at 13:21

bxg

115
3

This is not OP's question. Their question replaces #varColor's background color. – Sxribe Jan 09 '20 at 13:26
I think you are wrong. "can't figure out how to put the "varColor" variable's value as the background color of a web page" – bxg Jan 09 '20 at 13:31
1

Look at his code, it says `document.getElementById("varColor").innerHTML = color;` In addition, he sets the `color` variable, not a `varColor` variable. This may be just bad wording on OP's part. It wasnt selecting the element that was the issue, it was setting the color. Maybe @Jaz could clarify. – Sxribe Jan 09 '20 at 13:33
I was pretty much open for anything that works. what I wanted was a lightswitch that works on the page, that would "turn out the lights" whenever you turn it off; a Dark Mode on my little page. as long as I can use a variable system to mass produce this for fonts and links, I would be satisfied. – Jaz Jan 10 '20 at 15:15

is there a way to place a variable as the value in HTML?

4 Answers4