1. Registered User
Join Date
Jan 2006
Posts
43

calculate the sum

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>

<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>&nbsp;</p>
<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>
<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?

2. ok, to start, be more code 'aware'

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.

3. Registered User
Join Date
Jan 2006
Posts
43

confused!

i didnt get that at all im afraid.. let me send u the full code so u have a more understanding:
Code:
``` html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>

<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>&nbsp;</p>
<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>
<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>```

4. Banned
Join Date
Jan 2006
Location
I'm in GMT -5
Posts
561
In the code below, just change the var nWalls to 9. Don't know why your tables are so big, but maybe you will be putting images in there, huh?

Code:
```<html>

<style type="text/css">
label {display:block;}
</style>

<script type="text/javascript">

var nWalls = 3;

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);
f.value = calcArea(length,width);

}

</script>
<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>&nbsp;</p>

<!-- ONE -->

<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>

<!-- TWO -->

<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>&nbsp;</p>

<tr>
<td width="329" height="159"><p><strong>Wall 1</strong></p>
<label>Width of wall 1: <input type="text" name="widthBox2" size="6"></label>
<label>Length of wall 1: <input type ="text" name="lengthBox2" size="6"></label>

<p><input type= "button" name="calcBtn" 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>
</table>

<!-- THREE -->

<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>&nbsp;</p>
<tr>
<td width="329" height="159"><p><strong>Wall </strong></p>
<label>Width of wall 1: <input type="text" name="widthBox3" size="6"></label>
<label>Length of wall 1: <input type ="text" name="lengthBox3" size="6"></label>

<p><input type= "button" name="calcBtn" 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>
</table>

<tr>
<td height="56"><p><strong>Total Square meter:</strong></p>
<p><input type= "button" name="calcBtn9" value="Calculate"

onclick="sumAreas(this.form)"></p>
<label>The Square meter of the room is: <input type="text" name="squaremeterBox" size="12"

</tr>
</table>

</form>
</body>
</html>```

5. Registered User
Join Date
Jan 2006
Posts
43
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??

6. I may be wrong here, but I think you'll need to get the square root of the area and divide that by the largest of the two numbers for each selection.

To get the square root of a number, use Math.sqrt(number);

Make sure that you do any necessary conversion first to get the area and the selects into the same unit of measure, first.

7. Banned
Join Date
Jan 2006
Location
I'm in GMT -5
Posts
561

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.

8. Banned
Join Date
Jan 2006
Location
I'm in GMT -5
Posts
561
Code:
```<html>
<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>
<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>```

9. Registered User
Join Date
Jan 2006
Posts
43

perfect code

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.

10. Banned
Join Date
Jan 2006
Location
I'm in GMT -5
Posts
561
You're welcome, Mohammed. Good luck finishing it up.

11. Registered User
Join Date
Jan 2006
Posts
43

One laaast question..

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>

<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>&nbsp;</p>
<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>
<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>```

12. Banned
Join Date
Jan 2006
Location
I'm in GMT -5
Posts
561
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>```

13. Registered User
Join Date
Jan 2006
Posts
43
thanks agen.. ur a legend.. im new to programming.. youve taught me a good few things though.

14. Banned
Join Date
Jan 2006
Location
I'm in GMT -5
Posts
561
Take care.