I need variables to pass between a .js file, an .html and a .css file. How do I do this?

Question

I have three files inside of my script. The purpose of the script is to take the battery from the device (Which is working) display it on my background (which is also working) and then change the color depending on the level of battery (Which is not working).

These are the three files in question:

Battery.js

Background.html

and style.css

In my Battery.js I have a calculation method that calculates the amount of battery left in my phone. Defined by: "level".

if (level>=50) {
rb=0;
gb=240;
bb=240;
}
if (level <50) {
rb=100;
gb=140;
bb=140;
}
if (level <20) {
rb=230;
gb=30;
bb=30;
}

Basically I have three variables (rb, gb, and bb) that are each a color code for an "rgb(r,g,b)" code. In which I would type out as "rgb(rb,gb,bb)".

Inside this same battery.js file I have this code that defines how the battery is calculated and shown on the screen:

$("#battery").html(level+'%');

In my style.css file I have:

#battery{
    font-size: 25px;

Inside of Background.html I have two blocks of code:

<script type="text/javascript" charset="utf-8" src="Scripts/battery.js"></script>

And:

<p id="battery"></p>

If I place

color: rgb(rb,gb,bb);

in style.css in the appropriate place, nothing happens.

If I place that same code inside of background.html like this:

<font color="rgb(rb,gb,bb)">
    <p id="battery"></p>
</font>

Nothing happens also. How do I make the variables carry across the files so I can change the color of my battery to three different colors depending on what "level" is equal to? I have tried each combination of script, but I'm a complete frootloop when it comes to modifying someone else's code. Can you help me out? Thanks in advance!

Answer 1

Make three CSS classes with the three colors.

Change the class of the element with js in the conditionals. Here is how to do it: Change an element's class with JavaScript