PDA

View Full Version : How Can I change img with if statement (not with onclick etc)



Wuffo Hunter
Mar 19th, 2011, 09:22 AM
I have managed to get my program running perfectly for outputting alert boxes, however instead of alert boxes I would like my image to change with an IF statement.

My main image is a pic with text saying Please enter Temperature. if the user enters a temperature it will display an alert saying HOT, MODERATE or COLD. I have made other images that basically say the same thing and I would like the appropriate image to replace the original image depending on the IF statement

I have commented out my alertboxes (which work) and replaced new code above that I can't seem to get working. On lines 21, 27 and 33.

Any help would be greatly appreciated.



<html>
<head>
<title>TempReader™</title>
<script type="text/javascript">
//This is where we decare our function to validate the HTML form
function validateform()
{
// Setting our variable name and it's value by calling it from the HTML form textbox
var temp = document.forms["inputform"]["temperature"].value

// If the input is not a number or an empty field, alert the user and stop the program
if (isNaN(temp) || temp == "")
{
alert("Please enter a number");
return false;
}

//If the input is valid we compare the input value and display the appropriate output
if (temp > 35)
{
document.getElementById("temp_img").src ="temp_hot.png";
//alert("Wow, it's really hot!");
}

else if (temp <= 35 && parseFloat(temp) >= 18)
{
document.getElementById("temp_img").src ="temp_mid.png";
//alert("It's a comfortable temperature right now");
}

else if (temp < 18)
{
document.getElementById("temp_img").src ="temp_cold.png";
//alert("Brrr, it's a little bit cold for my liking");
}
}
</script>
</head>
<body>
<div style="margin-top:0px; text-align:center">
<img id="temp_img" src="what_temp.png" alt="Temperature" />
</div>
<form name="inputform" method="post" action="">
<table>
<tr><td><input type="text" name="temperature" value="Enter Temperature"></td></tr>
<!-- Below is submit button that when pressed validates the form -->
<tr><td><input type="submit" value="Submit" onclick = validateform()></td></tr>
</table>
</form>
</body>
</html>



BTW, My images are stored in the same directory as the HTML file and the img names are correct

bullant
Mar 19th, 2011, 10:49 AM
Since you're not actually submitting the form anywhere, the <form> element is actually redundant although obviously you could still use one if you want.

I fixed your code and removed the <form> element. I used my own images for testing though.

The main problem with your code was that after you validated the form it would actually submit the form to to the same page, effectively refreshing it.


<html>
<head>
<title>TempReader™</title>
<script type="text/javascript">
//This is where we decare our function to validate the HTML form
function validateform()
{
// Setting our variable name and it's value by calling it from the HTML form textbox
var temp = new Number(document.getElementsByName('temperature')[0].value);

// If the input is not a number or an empty field, alert the user and stop the program
if (isNaN(temp))
{
alert("Please enter a number");
return false;
}

//If the input is valid we compare the input value and display the appropriate output
if (temp > 35)
{
document.getElementById("temp_img").src ="num1.jpg";
//alert("Wow, it's really hot!");
}

else if (temp <= 35 && parseFloat(temp) >= 18)
{
document.getElementById("temp_img").src ="num2.jpg";
//alert("It's a comfortable temperature right now");
}

else (temp < 18)
{
document.getElementById("temp_img").src ="num3.jpg";
//alert("Brrr, it's a little bit cold for my liking");
}
}
</script>
</head>
<body>
<div>
<img id="temp_img" src="what_temp.png" alt="Temperature" />
</div>
<table>
<tr>
<td><input type="text" name="temperature" value="Enter Temperature"></td>
</tr>
<tr>
<td><button onclick ="validateform();">Send</button></td>
</tr>
</table>
</body>
</html>

Wuffo Hunter
Mar 19th, 2011, 05:50 PM
Hi Bullant,

thanks for taking the time to check out my code and even test it with your images, I really appreciate it.

Works perfectly now.

bullant
Mar 19th, 2011, 10:46 PM
you're welcome :)