Change CSS class with Javascript to be able to change color

Question

I am creating a BMI index calculator so far everything hass been good and I am lost when i think about how I should be able to change the background color of the div class to certain color according to their BMI result.

for example:

if the person is underweight it should be: grey
if the person is normal it should be: blue
if the person is overweight it should be: orange
if the person is obese it should be: red

How do i do this please help...

Here is the HTML CSS and Javascript

<html>
<head>
    <title>BMI Calculator</title>
<script type="text/javascript">
    function computeBMI() {
    //Obtain user inputs
    var height = Number(document.getElementById("height").value);
    var heightunits = document.getElementById("heightunits").value;
    var weight = Number(document.getElementById("weight").value);
    var weightunits = document.getElementById("weightunits").value;

    if (heightunits == "inches") height /= 39.3700787;
    if (weightunits == "lb") weight /= 2.20462;
    var BMI = weight / Math.pow(height, 2);     
    document.getElementById("output").innerText = Math.round(BMI * 100) / 100;

    var result;
    if (BMI <= 18.5) {
        result = 'underweight';
    } else if (BMI <= 24.9) {
        result = 'Normal';
    } else if (BMI <= 29.9) {
        result = 'Overweight';
    } else {
        result='Obese';
    }
   }
</script>

<style type="text/css">
    .resultclass{ background-color:yellow; width:500px; height:300px;}
    .underweight{ background-color:grey; width:500px; height:300px;}
    .normal{ background-color:blue; width:500px; height:300px;}
    .overweight{ background-color:orange; width:500px; height:300px;}
    .obese{ background-color:red; width:500px; height:300px;}
</style>
</head>
<body>
<h1>Body Mass Index Calculator</h1>
<p>Enter your height: <input type="text" id="height"/>
    <select type="multiple" id="heightunits">
        <option value="metres" selected="selected">metres</option>
        <option value="inches">inches</option>
    </select>
</p>
<p>Enter your weight: <input type="text" id="weight"/>
    <select type="multiple" id="weightunits">
    <option value="kg" selected="selected">kilograms</option>
    <option value="lb">pounds</option>
    </select>
    </p>
<input type="submit" value="computeBMI" onclick="computeBMI();">
<div class="resultclass">
    <h1>Your BMI is: <span id="output">?</span></h1>
    <h1>This means you are: <span id="resultdiv">?</span></h1>
</div>
</body>
</html>

Its definitely possible with just JS but you will probably love using JQuery UI ;) — Dayan
– Dayan, Commented Feb 17, 2014 at 18:40

Severian · Accepted Answer · 2014-02-17 18:25:46Z

3

In your computeBMI() function you set the class to what you want like this:

document.getElementById("resultdiv").className = "obese";

answered Feb 17, 2014 at 18:25

Severian

3253 silver badges7 bronze badges

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

1 Comment

Alex K. Over a year ago

or = result.toLowerCase() as he has the identifiers already

A. B · Accepted Answer · 2014-02-17 18:33:10Z

0

You can have a dictionary like:

var bg_colors = {'underweight': 'gray', 'Normal': 'blue', 'Overweight': 'red', 'Obese': '#ABC'}

and add:

document.getElementById("resultDiv").style.backgroundColor=bg_colors[result];

after calculating your result. Note that I gave and id "resultDiv" to the div element.

answered Feb 17, 2014 at 18:33

A. B

7179 silver badges20 bronze badges

Comments

NIck · Accepted Answer · 2014-02-17 18:33:29Z

0

In CSS, you can have classes that are a certain color:

.underweight {
    color: grey;
}
.overweight {
    color: blue;
}
...

Then as Severian said, you can add the class to the div depending on the BMI value. To save any existing classes you should use the 'classList' attribute, which works in most browsers except IE 8:

document.getElementById("resultdiv").classList.add("underweight");

And remember to remove any previous BMI classes when the user enters new information.

answered Feb 17, 2014 at 18:33

NIck

462 bronze badges

Comments

Matt · Accepted Answer · 2014-02-17 18:36:47Z

0

You could use jQuery to do this with one line of code:

$("#resultdiv").addClass("obese");

http://api.jquery.com/addclass/

If you need to remove a class first it would be like this:

$("#resultdiv").removeClass("classname").addClass("obese");

https://api.jquery.com/removeClass/

answered Feb 17, 2014 at 18:36

Matt

4771 gold badge5 silver badges19 bronze badges

Collectives™ on Stack Overflow

Change CSS class with Javascript to be able to change color

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related