Log in

View Full Version : Else If statement problem


gemzilla
10-04-2012, 01:42 PM
I have a bit of code where in the html there is a length and width text box and a submit button.

The Java Script part adds up the length and width when the button is pressed and with the total it works out a price range depending on the value. it then displays the price in the html. It is not displaying the correct price and im wondering what has gone wrong. The code is below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function range()

{
var dimension = (document.getElementById("length").value + document.getElementById("width").value);
var from = 0;
var to = 0;


if (dimension < 3.5)
{
from = 900
to = 1125
}

else if (dimension >=3.5 && dimension < 4)
{
from = 1200;
to = 1500;
}
else if (dimension >=4 && dimension < 5)
{
from = 1600;
to = 1900;
}
else if (dimension >=5)
{
from = 1950;
to = 2200;
}
else
{
alert("invalid entry");
}
document.getElementById("price").innerHTML= from + " - " + to;
}
</script>

</head>

<body>

<form name="bathroom" >
<table width="300" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="164" height="26" class="textbold">Length</td>
<td width="236"><label>
<input name="length" type="text" class="text" id="length"/>
</label></td>
</tr>
<tr>
<td class="textbold">Width</td>
<td><label>
<input name="width" type="text" class="text" id="width"/>
</label></td>
</tr>
<tr>
<td class="textbold">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center"><div id="price"></div>
</td>
</tr>
<tr>
<td colspan="2" align="center"></td>
</tr>
</table>
<label>
<input type="button" name="ok" id="ok" value="Submit" onclick="range()"/>
</label>
</form>
</body>
</html>
vwphillips
10-04-2012, 02:36 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function range(){
var l= document.getElementById("length").value,w=document.getElementById("width").value;
if (l&&isFinite(l*1)&&w&&isFinite(w*1)){
var dimension = 1*1 + w*1; // original calculation
var dimension = l*w; // I think this is what you want
var from = 0,to = 0;


if (dimension < 3.5){
from = 900
to = 1125
}

else if (dimension < 4){
from = 1200;
to = 1500;
}
else if (dimension < 5){
from = 1600;
to = 1900;
}
else {
from = 1950;
to = 2200;
}
document.getElementById("price").innerHTML= from + " - " + to;
}
else{
alert("invalid entry");
}
}
</script>

</head>

<body>

<form name="bathroom" >
<table width="300" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="164" height="26" class="textbold">Length</td>
<td width="236"><label>
<input name="length" type="text" class="text" id="length"/>
</label></td>
</tr>
<tr>
<td class="textbold">Width</td>
<td><label>
<input name="width" type="text" class="text" id="width"/>
</label></td>
</tr>
<tr>
<td class="textbold">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center"><div id="price"></div>
</td>
</tr>
<tr>
<td colspan="2" align="center"></td>
</tr>
</table>
<label>
<input type="button" name="ok" id="ok" value="Submit" onclick="range()"/>
</label>
</form>
</body>
</html>
gemzilla
10-10-2012, 09:13 AM
Well that works. Im not sure what you bit of code did to make it work, could you explain it to me? Don't worry this isnt any form of homework Im just new to java script.