justGage keeps appending the meter on Submit click

I am building a javascript BMI calculator for school and I am adding a gauge element that shows the BMI level and colors the bar red, yellow or green based on being underweight, normal weight, overweight or obese.

I am using the justGage jquery plugin for the gauge.

The problem that I'm facing is that whenever the user clicks the submit button for the form, a new Gauge appears above the old gauge and they keep stacking. I would like for the new Gauge to replace the old.

Here is the code that I have.

$(function() {
  $('#bmiKG').validate({


    success: "valid",
    submitHandler: function() {
      event.preventDefault();

      var htCn = Number($('#heightCN').val());
      var htM = Number($('#heightM').val());
      var wtKg = Number($('#weightKG').val());
      var topline_KG = wtKg;
      console.log('The Top line of the function eguals: ' + topline_KG);
      var btmline_KG = Math.pow(((htCn / 100) + htM), 2);
      console.log('The Bottom line of the function eguals: ' + btmline_KG);

      var bmi_KG = Math.round((topline_KG / btmline_KG) * 100) / 100;
      console.log('The BMI equals: ' + bmi_KG);

      document.getElementById('output_KG').innerHTML = bmi_KG;

      var g_kg;

      var g_kg = new JustGage({
        id: "g_kg",
        value: bmi_KG,
        min: 0,
        max: 50,
        decimals: 2,
        title: "BMI",
        label: "BMI",
        customSectors: [{
          color: "#FCFF00",
          lo: 0,
          hi: 18.4
        }, {
          color: "#00A200",
          lo: 18.5,
          hi: 24.9
        }, {
          color: "#FCFF00",
          lo: 25,
          hi: 29.9
        }, {
          color: "#FF0000",
          lo: 30,
          hi: 50
        }],
      });

    }


  });





});

#g_kg {
  width: 200px;
  height: 160px;
  display: inline-block;
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<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>
  <div>
    <form id="bmiKG" action="http://www.google.com">
      <label for="heightCN">Height in Centimeters</label>
      <br>
      <input type="number" name="heightCN" id="heightCN" class="required number">
      <br>
      <label for="heightM">Height in Meters</label>
      <br>
      <input type="number" name="heightM" id="heightM" class="required number">
      <br>
      <label for="weightKG">Weight in Kilograms</label>
      <br>
      <input type="number" name="weightKG" id="weightKG" class="required number">
      <br>
      <button type="submit" name="bmiKG_submit" id="bmiKG_submit">Compute BMI</button>
    </form>

    <p>Your BMI is: <span id="output_KG"></span>
    </p>
    <div id="g_kg"></div>
  </div>



</body>

Solution

The best way I can think of is to move your object declaration outside of the validate() function. Then you can just reference that same object within the function and use the refresh(val) method on the guage that gets created when the page first loads.

$(function() {
  var g_kg = new JustGage({
        id: "g_kg",
        value: 0,
        min: 0,
        max: 50,
        decimals: 2,
        title: "BMI",
        label: "BMI",
        customSectors: [{
          color: "#FCFF00",
          lo: 0,
          hi: 18.4
        }, {
          color: "#00A200",
          lo: 18.5,
          hi: 24.9
        }, {
          color: "#FCFF00",
          lo: 25,
          hi: 29.9
        }, {
          color: "#FF0000",
          lo: 30,
          hi: 50
        }],
  });


  $('#bmiKG').validate({

    success: "valid",
    submitHandler: function() {
      event.preventDefault();

      var htCn = Number($('#heightCN').val());
      var htM = Number($('#heightM').val());
      var wtKg = Number($('#weightKG').val());
      var topline_KG = wtKg;
      console.log('The Top line of the function eguals: ' + topline_KG);
      var btmline_KG = Math.pow(((htCn / 100) + htM), 2);
      console.log('The Bottom line of the function eguals: ' + btmline_KG);

      var bmi_KG = Math.round((topline_KG / btmline_KG) * 100) / 100;
      console.log('The BMI equals: ' + bmi_KG);

      document.getElementById('output_KG').innerHTML = bmi_KG;
      // the documentation isn't really clear for justgage, but
      // the 2nd parameter is the new max value. I'm not sure if it can be omitted
      g_kg.refresh(bmi_KG, null);
    }
  });
});

With this method, you are just changing the value of the already-existing gauge, and not creating a new one every time the validation function runs.