This question already has an answer here:
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.