How to use JavaScript math.round in an HTML IMG tag?

Question

Background: I have a simple web page displaying current weather conditions from a backyard weather station. I am trying to add a UV image on the web site. I'm comfortable with basic HTML, but JavaScript seems like a foreign language to me. I've found threads about using Math.round , and calling images in JavaScript, but haven't figured out how to combine the two.

My weather software outputs the UV Index with a one-place decimal point. I want to round to an integer, and then use that integer to place an image relevant to that integer on the web page.

I've figured out how to get Math.round to replace the template's UV callout with an integer. The software's template tag for UV is STAT$UV:CURRENT$ . When I put this in a JavaScript (with text before and after to give the entire image file name) it looks like this:

UV_<script type="text/javascript">document.write(Math.round(STAT$UV:CURRENT$));</script>.gif

This results in UV_X.gif being displayed on my web page, as expected, where X equals the current UV Index. But when I try to wrap this in an IMG tag I can't get the results I'm after.

I think I need to use a variable, but I don't understand variables and the syntax needed to call out the image.

Any suggestions?

[EDIT]

I tested the three suggestions in the answers below. None resulted in displaying the image, so I've probably not explained my question well enough.

The weather software runs locally on my computer. It receives a packet of data from the outdoor weather station, processes that data, and displays it on screen. It also populates a locally stored template and then uploads it to my web site via FTP. Other than a couple pre-packages scripts on the server, everything is processed locally. My test page for these suggestions is at avon-weather.com/test.html Take a peek and see if you see what I'm doing wrong? Thanks!

Answer 1

You should probably round the number on the server side since you are using a server framework. Also, try to avoid document.write if you can, it can cause some tricky issues if you don't fully understand it (especially if you are mixing server-side and client-side rendering). However, here's an example of how you can do it on the client side:

<img id="myImage" />

<script type="text/javascript">
    var imgSrc = "UV_" + Math.round(STAT$UV:CURRENT$) + ".gif";
    document.getElementById("myImage").setAttribute('src', imgSrc);
</script>

Answer 2

document.write shouldn't be used. The modern way would be:

<img id="set-me" />
...
<script>
  document.getElementByID("set-me").src = 
    "UV_"+Math.round(STAT$UV:CURRENT$)+".gif";
</script>

If you are willing to use jQuery,

 <img id="set-me" />
 ...
 <script>
   $("#set-me").attr("src",
     "UV_"+Math.round(STAT$UV:CURRENT$)+".gif");
 </script>

Answer 3

You can't just shove a <script> tag in the middle of an <img> tag and expect it to work. It works with PHP because PHP is handled server-side independently of the HTML, but JavaScript is an element in HTML.

Instead, try uding document.write() around the entire <img> tag, something like:

<script type="text/javascript">
  document.write('<img src="UV_'+Math.round(STAT$UV:CURRENT$)+'.gif"/>');
</script>