Search code examples
javascriptjustgage

Change value of gage dynamically


I am developing a fitness app in which i want to represent BMI through gage but didn't getting how to change the value of gage dynamically as well second problem is that when i am putting gage script on button click it giving me error "No element with id: "gauge" found!". Can anyone solve my both issues as i am new to JS. So enlighten me and correct me.

<html>
<head>
<script src="raphael.2.1.0.min.js"></script>
<script src="justgage.1.0.1.min.js"></script>

<script type="text/javascript">
function funky()
{
    var weight=document.getElementById("weight");
    var height=document.getElementById("height");
    var heightDouble=height.value*height.value;
    var bmi=weight.value/heightDouble;
    document.getElementById("bmi").innerHTML=bmi;
    cc();
}
</script>
</head>
<body>
<input type="text" id="weight"/>
<input type="text" id="height"/>
<input type="button" id="calculate" onClick="funky()"/>
<div id="bmi"></id>
<div id="gauge"></div>

           <script>
           function cc()
           {               
var g = new JustGage({
id: "gauge",        
value: 10,
min: 0,
max: 100,
title: "Visitors"
}); 
}   
</script>

</body>
</html>

Solution

  • You will want to fix your BMI calculation and add units (lbs vs. kg, cm vs. in), because I am getting numbers below zero. At any rate, I wrote a new calculation (just add weight and height) to demonstrate how to update the gauge: Most likely you are getting the "gauge not found" error because of the way the script is ordered relative to the div element.

    Please see This JSFiddle demo

    <script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>
    <script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>
    <body>
        <input type="text" id="weight" />
        <input type="text" id="height" />
        <input type="button" id="calculate" onClick="funky()" value="calculate" />
        <div id="bmi"></div>
        <div id="gauge" class="200x160px"></div>
        <script>
            function funky() {
                var weight = document.getElementById("weight");
                var height = document.getElementById("height");
                var heightDouble = height.value * height.value;
                var bmi = weight.value / heightDouble;
                document.getElementById("bmi").innerHTML = bmi;
                //cc();
                var weightPlusHeight = parseInt(weight.value) + parseInt(height.value);
                g.refresh(weightPlusHeight);
            }
    
            var g = new JustGage({
                id: "gauge",
                value: 0,
                min: 0,
                max: 200,
                title: "BMI"
            });
        </script>
    </body>