i have a set of rectangles which i have named wall 1, wall 2, wall 3 etc, each calculate the length and the width, then give the total area of that rectangle, however i need to get the square meter of that set of areas which involves adding them all together, heres an example of one of the rectangles and what i am stuck on, i cant seem to write the function of how to get the sum of the functions:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Al-Murads ceramic Tiles simulator</title>
<script type="text/javascript">
function calcArea(L,W)
{return L*W;}
function calc(f,W,L){
var width = parseFloat(W);
var length = parseFloat(L);
var area = calcArea (length,width);
//var squaremeter = calcSquaremeter();
f.value = calcArea(length,width);
//f.squaremeterBox.value = squaremeter;
}
</script><form>
<style type="text/css">
label {display:block;}
</style>
</head>
<body>
<table width="715" height="99" border="1">
<tr>
<td width="705"><img src="al-murad logo.JPG" width="705" height="99" /></td>
</tr>
</table>
<p> </p>
<table width="715" height="617" border="2" cellpadding="1">
<tr>
<td width="329" height="159"><p><strong>Wall 1</strong></p>
<label>Width of wall 1: <input type="text" name="widthBox1" size="6"></label>
<label>Length of wall 1: <input type ="text" name="lengthBox1" size="6"></label>
<p><input type= "button" name="calcBtn" value="Calculate"
onclick="calc(this.form.areaBox1,this.form.widthBox1.value,this.form.lengthBox1.value)"></p>
<label>The area is: <input type="text" name="areaBox1" size="12" readonly></label>
</td>
</table>
<table width="714" border="2" cellpadding="1">
<tr>
<td height="56"><p><strong>Total Square meter:</strong></p>
<p><input type= "button" name="calcBtn9" value="Calculate"
onclick="calc(............................................................)"></p>
<label>The Square meter of the room is: <input type="text" name="squaremeterBox" size="12" readonly></label></td>
</tr>
</table>
</body>
</html>
the area calculation works, where it says wall 1, i have eight of them, and im at a standstill bcoz i cant get the sqare meter.. can anyone help?
you have a <form> tag i your document header. It should be in the document body. There is no closing form tag, and your tables are not defined correctly.
generally what you need to do is hav an array for the values generated. Each time you calculate the area of a wall, you put it's value into the array. Then whe n you are ready to calculate the area, you call a function that sums tha contents of the array.
To do that you would use a loop whose evaluator is the length of the array: for(i=0; i<arrWalls.length; i++) if your array was called arrWalls.
You then have a variable, lets say called intSum, whose value is increased by the amount of each array item: intSum += arrWalls[i].
Try work it out your self from that, if you really can't, post back.
yeh your rite, they are quite big, but thats not intended. iv fixed that. one more question, i knpow im a pain, but i have no other help. say once iv got the square meter of a certain room rite.. then i have a selection of set tiles for e.g
Code:
<td valign="bottom" align="left" style="font-size:11px;font-family:verdana;">
<input type="Hidden" name="units" value="m">
<select name="SurfaceTileSize" class="select">
<option value="0">Select One</option>
<option value="116.64" >10.80cm x 10.80cm</option>
<option value="232.2576">15.24cm x 15.24cm</option>
<option value="309.6768" >15.24cm x 20.32cm</option>
<option value="412.9024" >20.32cm x 20.32cm</option>
<option value="464.5152" >15.24cm x 30.48cm</option>
<option value="929.0304" >30.48cm x 30.48cm</option>
<option value="1090.3204" >33.02cm x 33.02cm</option>
<option value="1651.6096" >40.64cm x 40.64cm</option>
<option value="1861.9216" >43.12cm x 43.12cm</option>
<option value="2089.4040" >45.72cm x 45.72cm</option>
</select>
</td>
how do i script it so that it will give me an estimation of how many tiles that roomm would need??
Hopefully you mean that you are tiling those walls, and not the floor.
If it's the walls, then take the length and width of a particular tile, adding a "border" amount for grout, calculate its area in square centimeters, convert it to square meters, then divide the value in the "squaremeterBox" by the area of a single tile.
The result will be an estimate of the number of tiles needed.
<html>
<head>
<script type="text/javascript">
var grout = .03; // grout is estimated at 3% of tile width
var trimLoss = .10; // increase actual estimate by 10% for damaged and trimmed tiles
function estimateTiles(nArea){
var tileArea = nArea*(1+grout);
var wallArea = document.forms[0]['squaremeterBox'].value;
if (wallArea != "" && wallArea != 0 && tileArea != 0)
{
var nTiles = (wallArea/tileArea)*(1+trimLoss);
document.forms[0]['tilesNeeded'].value = Math.round(nTiles);
}
else {document.forms[0]['tilesNeeded'].value = ""}
}
</script>
</head>
<body>
<form>
<select name="SurfaceTileSize" onchange="estimateTiles(this.value)">
<option value="0">Select One</option>
<option value=".011664">10.80cm x 10.80cm</option>
<option value=".02322576">15.24cm x 15.24cm</option>
<option value=".03096768" >15.24cm x 20.32cm</option>
<option value=".04129024" >20.32cm x 20.32cm</option>
<option value=".04645152" >15.24cm x 30.48cm</option>
<option value=".09290304" >30.48cm x 30.48cm</option>
<option value=".10903204" >33.02cm x 33.02cm</option>
<option value=".16516096" >40.64cm x 40.64cm</option>
<option value=".18619216" >43.12cm x 43.12cm</option>
<option value=".20894040" >45.72cm x 45.72cm</option>
</select>
<br>
The Square meter of the room is: <input type="text" name="squaremeterBox" size="12" value="8545.39" readonly>
<br><br>
Estimated number of tiles: <input type="text" name="tilesNeeded" size="12" readonly>
</form>
</body>
</html>
thank you so much.. that actualy works perfectly with my specification. im going to implement it all with the full system, and let you know how it works out. thank you very much.
iv integrated the full code, it pieces together and it all works fine, except for the bit that gives you the estimation of the tiles. now, i ran the javascript console on firefox like you advised me and it comes up with four error messages saying Error: EstimateTiles not defined. Im assuming its talking about the function, aside from that i dont have a clue what the problem is!!
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Al-Murads ceramic Tiles simulator</title>
<script type="text/javascript">
var nWalls = 8;
function sumAreas(nForm){
var tmpTotal = 0;
for (i=1; i<nWalls+1; i++)
{
if (nForm['areaBox'+i].value != "")
{
tmpTotal += parseFloat(nForm['areaBox'+i].value);
}
}
nForm['squaremeterBox'].value = tmpTotal.toFixed(2);
}
function calcArea(L,W)
{return L*W;}
function calc(f,W,L){
var width = parseFloat(W);
var length = parseFloat(L);
var area = calcArea (length,width);
f.value = calcArea(length,width);
var grout = .03; // grout is estimated at 3% of tile width
var trimLoss = .10; // increase actual estimate by 10% for damaged and trimmed tiles
function estimateTiles(nArea){
var tileArea = nArea*(1+grout);
var wallArea = document.forms[0]['squaremeterBox'].value;
if (wallArea != "" && wallArea != 0 && tileArea != 0)
{
var nTiles = (wallArea/tileArea)*(1+trimLoss);
document.forms[0]['tilesNeeded'].value = Math.round(nTiles);
}
else {document.forms[0]['tilesNeeded'].value = ""}
}
}
</script>
<style type="text/css">
label {display:block;}
</style>
</head>
<body>
<form>
<table width="715" height="99" border="1">
<tr>
<td width="705"><img src="al-murad logo.JPG" width="705" height="99" /></td>
</tr>
</table>
<p> </p>
<table width="715" height="617" border="2" cellpadding="1">
<tr>
<td width="329" height="159"><p><strong>Wall 1</strong></p>
<label>Width of wall 1: <input type="text" name="widthBox1" size="6"></label>
<label>Length of wall 1: <input type ="text" name="lengthBox1" size="6"></label>
<p><input type= "button" name="calcBtn" value="Calculate"
onclick="calc(this.form.areaBox1,this.form.widthBox1.value,this.form.lengthBox1.value)"></p>
<label>The area is: <input type="text" name="areaBox1" size="12" readonly></label>
</td>
<td width="368"><p><strong>Wall 2</strong></p>
<label>Width of wall 2: <input type="text" name="widthBox2" size="6"></label>
<label>Length of wall 2: <input type ="text" name="lengthBox2" size="6"></label>
<p><input type= "button" name="calcBtn2" value="Calculate"
onclick="calc(this.form.areaBox2,this.form.widthBox2.value,this.form.lengthBox2.value)"></p>
<label>The area is: <input type="text" name="areaBox2" size="12" readonly></label></td>
</tr>
<tr>
<td><p><strong>Wall 3</strong></p>
<label>Width of wall 3: <input type="text" name="widthBox3" size="6"></label>
<label>Length of wall 3: <input type ="text" name="lengthBox3" size="6"></label>
<p><input type= "button" name="calcBtn3" value="Calculate"
onclick="calc(this.form.areaBox3,this.form.widthBox3.value,this.form.lengthBox3.value)"></p>
<label>The area is: <input type="text" name="areaBox3" size="12" readonly></label>
</td>
<td><p><strong>Wall 4</strong></p>
<label>Width of wall 4: <input type="text" name="widthBox4" size="6"></label>
<label>Length of wall 4: <input type ="text" name="lengthBox4" size="6"></label>
<p><input type= "button" name="calcBtn4" value="Calculate"
onclick="calc(this.form.areaBox4,this.form.widthBox4.value,this.form.lengthBox4.value)"></p>
<label>The area is: <input type="text" name="areaBox4" size="12" readonly></label></td>
</tr>
<tr>
<td><p><strong>Wall 5</strong></p>
<label>Width of wall 5: <input type="text" name="widthBox5" size="6"></label>
<label>Length of wall 5: <input type ="text" name="lengthBox5" size="6"></label>
<p><input type= "button" name="calcBtn5" value="Calculate"
onclick="calc(this.form.areaBox5,this.form.widthBox5.value,this.form.lengthBox5.value)"></p>
<label>The area is: <input type="text" name="areaBox5" size="12" readonly></label></td>
<td><p><strong>Wall 6</strong></p>
<label>Width of wall 6: <input type="text" name="widthBox6" size="6"></label>
<label>Length of wall 6: <input type ="text" name="lengthBox6" size="6"></label>
<p><input type= "button" name="calcBtn6" value="Calculate"
onclick="calc(this.form.areaBox6,this.form.widthBox6.value,this.form.lengthBox6.value)"></p>
<label>The area is: <input type="text" name="areaBox6" size="12" readonly></label></td>
</tr>
<tr>
<td><p><strong>Wall 7</strong></p>
<label>Width of wall 7: <input type="text" name="widthBox7" size="6"></label>
<label>Length of wall 7: <input type ="text" name="lengthBox7" size="6"></label>
<p><input type= "button" name="calcBtn7" value="Calculate"
onclick="calc(this.form.areaBox7,this.form.widthBox7.value,this.form.lengthBox7.value)"></p>
<label>The area is: <input type="text" name="areaBox7" size="12" readonly></label>
</td>
<td><p><strong>Wall 8</strong></p>
<label>Width of wall 8: <input type="text" name="widthBox8" size="6"></label>
<label>Length of wall 8: <input type ="text" name="lengthBox8" size="6"></label>
<p><input type= "button" name="calcBtn8" value="Calculate"
onclick="calc(this.form.areaBox8,this.form.widthBox8.value,this.form.lengthBox8.value)"></p>
<label>The area is: <input type="text" name="areaBox8" size="12" readonly></label>
</td></tr>
</table>
<table width="714" border="2" cellpadding="1">
<tr>
<td width="331" height="56"><p><strong>Total Square meter:</strong></p>
<p><input type= "button" name="calcBtn9" value="Calculate"
onclick="sumAreas(this.form)"></p>
The Square meter of the room is: <input type="text" name="squaremeterBox" size="12" value="" readonly></td>
<td width="365"><select name="SurfaceTileSize" onchange="estimateTiles(this.value)">
<option value="0">Select One</option>
<option value=".011664">10.80cm x 10.80cm</option>
<option value=".02322576">15.24cm x 15.24cm</option>
<option value=".03096768" >15.24cm x 20.32cm</option>
<option value=".04129024" >20.32cm x 20.32cm</option>
<option value=".04645152" >15.24cm x 30.48cm</option>
<option value=".09290304" >30.48cm x 30.48cm</option>
<option value=".10903204" >33.02cm x 33.02cm</option>
<option value=".16516096" >40.64cm x 40.64cm</option>
<option value=".18619216" >43.12cm x 43.12cm</option>
<option value=".20894040" >45.72cm x 45.72cm</option>
</select>
<br><br>
Estimated number of tiles: <input type="text" name="tilesNeeded" size="12" readonly>
</td>
</tr>
</table>
</form>
</body>
</html>
You have difficulty with your closing braces. You omitted the closing brace from the calc() function and you put, again, an extra closing brace at the bottom of the script. Keep variable declarations at the top, so no one has to hunt for them.
Code:
<script type="text/javascript">
var nWalls = 8;
var grout = .03; // grout is estimated at 3% of tile width
var trimLoss = .10; // increase actual estimate by 10% for damaged and trimmed tiles
function sumAreas(nForm){
var tmpTotal = 0;
for (i=1; i<nWalls+1; i++)
{
if (nForm['areaBox'+i].value != "")
{
tmpTotal += parseFloat(nForm['areaBox'+i].value);
}
}
nForm['squaremeterBox'].value = tmpTotal.toFixed(2);
}
function calcArea(L,W)
{return L*W;}
function calc(f,W,L){
var width = parseFloat(W);
var length = parseFloat(L);
var area = calcArea (length,width);
f.value = calcArea(length,width);
}
function estimateTiles(nArea){
var tileArea = nArea*(1+grout);
var wallArea = document.forms[0]['squaremeterBox'].value;
if (wallArea != "" && wallArea != 0 && tileArea != 0)
{
var nTiles = (wallArea/tileArea)*(1+trimLoss);
document.forms[0]['tilesNeeded'].value = Math.round(nTiles);
}
else {document.forms[0]['tilesNeeded'].value = ""}
}
</script>
Reply With Quote
Bookmarks