Javascript + dynamic meter value
Posted: Mon 31 Jul 2023 8:53 pm
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:
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?
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 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?