I am working on a project that converts temperatures from farenheit to celcius and vice versa. I also need to provide a graphic that displays the converted temperature in the form of a thermometer with the mercury moving to the appropriate temperature that is converted.
I have no problem with the conversion, but cannot seem to work out the graphic. I am trying to load an image from an array to correspond to the temperature that is computed and am having trouble getting it to work. Can someone help. Here is the code that I have so far:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function show()
{
var far = document.degin.far.value
var deg = Math.round((far - 32) * 5/9)
document.degin.cel.value = deg
var tempC = degin.cel.value
}
function showt()
{
var cels = document.itt.celt.value
var fin = Math.round((cels * 9/5)+32)
document.itt.fartw.value = fin
var tempF = document.itt.fartw.value
}
var currentImage = 0
var my_images = new Array(16)
my_images[0] = "C:/TempCon/images/thermometer.JPG"
my_images[1] = "C:/TempCon/images/thermometer-0.JPG"
my_images[2] = "C:/TempCon/images/thermometer-1.JPG"
my_images[3] = "C:/TempCon/images/thermometer-2.JPG"
my_images[4] = "C:/TempCon/images/thermometer-3.JPG"
my_images[5] = "C:/TempCon/images/thermometer-4.JPG"
my_images[6] = "C:/TempCon/images/thermometer-5.JPG"
my_images[7] = "C:/TempCon/images/thermometer-6.JPG"
my_images[8] = "C:/TempCon/images/thermometer-7.JPG"
my_images[9] = "C:/TempCon/images/thermometer-8.JPG"
my_images[10] = "C:/TempCon/images/thermometer-9.JPG"
my_images[11] = "C:/TempCon/images/thermometer-10.JPG"
my_images[12] = "C:/TempCon/images/thermometer-11.JPG"
my_images[13] = "C:/TempCon/images/thermometer-12.JPG"
my_images[14] = "C:/TempCon/images/thermometer-13.JPG"
my_images[15] = "C:/TempCon/images/thermometer-14.JPG"
my_images[16] = "C:/TempCon/images/thermometer-15.JPG"
function loadImage()
{
if (tempC > 0)
{
var currentImage = parseInt((tempC*17)/17)-1; //Subtract one becaue our images start with "0"
} else {
currentImage = 0
}
document.images[0].src = my_images[currentImage]
}
// End -->
</script>
</HEAD>
<BODY>
<div align="center">
<h3><u>Fahrenheit to Celsius</u></h3>
<form name="degin">
Fahrenheit:
<input type="text" name="far" size="5">
<input type="button" value="Convert to Celsius -->" onClick="show();loadImage()">
<input type="text" name="cel" size="15">
<input type="reset" name="ResetBtn" value="Reset">
</form>
<form name="itt">
<h3><u>Celsius to Fahrenheit</u></h3>
Celsius:
<input type="text" name="celt" size="5">
<input type="button" value="Convert to Fahrenheit -->" onClick="showt()">
<input type="text" name="fartw" size="15">
<input type="reset" name="ResetBtn" value="Reset">
</form>
<p> </p>
<p><img src="C:/TempCon/images/thermometer.JPG" width="148" height="337">
<p> </p>
</div>
</BODY>
</HTML>