|
|
|
Established Member
ok so im working on a piece of code for a class. I have gone over the code several times and I am just not seeing the problem. I tried running it through jslint and its comming back fine...
<!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>Darcy Viohl CIS 1207 Lab 3</title>
<link href="1207_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="head">
<h1>Darcy Viohl</h1>
<h2>Wallpaper Calculator</h2>
</div>
<div id="content">
<h2>Please enter the dimensions of your room</h2>
<table width="500">
<tr>
<td width="122" align="right">
Width:
</td>
<td width="124" align="left">
<input type="text" id="wide" value="10" size="8" />
</td>
<td width="122" align="right">
Length:
</td>
<td width="122" align="left">
<input type="text" id="length" value="10" size="8"/>
</td>
</tr>
<tr>
<td align="right">
Height
</td>
<td align="left">
<input type="text" id="high" value="8" size="8"/>
</td>
<td align="right"># of doors:
</td>
<td align="left">
<input type="text" id="door" value="1" size="8"/>
</td>
</tr>
<tr>
<td align="right" colspan="2">
# of windows:
</td>
<td colspan="2" align="left">
<input type="text" id="window" value="1" size="8"/>
</td>
</tr>
</table>
<hr/>
<input type="button" value="Calculate"
onclick="
var wid, len, hei, door, wind, doorSub, windSub, area, areaSub, areaDif, single, double, fulldub, roll, message;
wid = parseFloat (document.getElementById('width').value);
len = parseFloat (document.getElementById('length').value);
hei = parseFloat (document.getElementById('high').value);
door = parseFloat (document.getElementById('door').value);
doorSub = 18;
wind = parseFloat (document.getElementById('window').value);
windSub = 15;
area = 2*( len + wid )*hei;
areaSub = (door*doorSub)+(wind*windSub);
areaDif = area - areaSub;
roll = 30;
single = areaDif / roll;
double = areaDif / (roll * 2);
fulldub = Math.ceil (areaDif / (roll * 2));
message = ('A room ' + wid + 'ft wide, ' + len + 'ft long, ' + hei + 'ft high, is: ' + area + 'Square feet \n The uncovered area is: ' + areaSub + 'sqft \n The area you need to cover is: ' + areaDif +'sqft');
document.getElementById('outbox').value = message;
document.getElementById('singleout').value = single;
document.getElementById('doubleout').value = double;
document.getElementById('purchaseout').value = fulldub;
"/>
<br/>
<textarea cols="60" rows="5" id="outbox"></textarea>
<table width="500" align="center" cellspacing="0" style="margin-top:15px;">
<tr>
<td width="216" align="right">
<input type="text" size="8" id="singleout"/><br/>
<input type="text" size="8" id="doubleout"/><br/>
<input type="text" size="8" id="purchaseout"/>
</td>
<td width="278" align="left">
Single Rolls<br/>Double Rolls<br/>Full Double Rolls
</td>
</tr>
</table>
</div>
<div id="foot">
<a href="mailto:dviohl@cnm.edu" style="text-decoration:none; font-size:24px; color:#CCC; font:'Comic Sans MS', cursive; font-weight:bold;" >Contact Me</a>
</div>
</div>
</body>
</html>
everything comes up fine but when i hit my calculate i get no result.
Established Member
Put your JavaScript between script tags and into a function. Call the function from the onclick event.
HTML Code:<script type="text/javascript"> function calculate() { var wid = parseFloat (document.getElementById('width').value); //etc... } </script> <button onclick="calculate()">Calculate!</button>
Posting Permissions
Reply With Quote