CODEWITHSUNDEEP
javascripthtmlcss
user3311898
user3311898

Reputation: 113

Change CSS class with Javascript to be able to change color

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:

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>

Upvotes: 0

Views: 537

Answers (4)

Matt
Matt

Reputation: 477

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/

Upvotes: 0

NIck
NIck

Reputation: 46

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.

Upvotes: 0

A. B
A. B

Reputation: 717

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.

Upvotes: 0

Severian
Severian

Reputation: 325

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

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

Upvotes: 3

Related Questions