Javascript + dynamic meter value

[Mapantz]

I've been playing around with the html meter tag to make a meter for certain rain totals, whilst that is straight forward, the next step is to make the meter read a dynamic value with Javascript.

At the moment, I did it in the inefficient and long way, with an example below:

Code: Select all

  var rdayMeter = x.getElementsByTagName("rdaymeter")[0].childNodes[0].nodeValue;
  if (rdayMeter < 0.0) { document.getElementById("rdaymeter").innerHTML = '<meter value="0" min="0" max="25"></meter>'; }
  if ((rdayMeter >= 0.1) && (rdayMeter <= 5)) { document.getElementById("rdaymeter").innerHTML = '<meter value="5" min="0" max="25"></meter>'; }
  if ((rdayMeter >= 5.1) && (rdayMeter <= 10)) { document.getElementById("rdaymeter").innerHTML = '<meter value="10" min="0" max="25"></meter>'; }

I then put <span id="rdaymeter"></span> in the html file to get the meter bar.

I know there is a better way to do it, but that's where I am stuck.

How can I populate meter value=" " with the exact value that is being supplied?