Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How can I round numbers up and to 2 decimal places? 2

Status
Not open for further replies.
jdunderhill

jdunderhill

Technical User
Nov 25, 2002
223
GB
Hi

I am quite new to javascript, I have searched everywhere and tried many tutorials but I can't work out how to round up in the following two scenarios

Scenario 1: - Rounding a number to 2 decimal places

If a calculation returns a number e.g 3.56234, how can the number be rounded to 3.60?

Scenario 2: - Rounding up to a whole number

If a calculation returns a number e.g 27.7698, how can it be rounded to 28?

I have been working on a javascript calculator and would like to improve my code by implementing the above scenarios, but everywhere I looked refers to a math.round function and document.write function but I cannot workout how or where they could fit into my code and wondered if someone could help?

The source code for my calculator is:

Code: 
<html>
<head>
<script language="javascript">
function measurements()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var val3 = parseInt(document.getElementById("value3").value);
var ans1 =document.getElementById("answer")
var ans2 =document.getElementById("answer2")
var ans3 =document.getElementById("answer3")
ans1.value = (val1*val2) /10000;
ans2.value = (val1*val2) /10000 *2;
ans3.value = (val1*val2) /10000 *2 * val3 *1.05;
}
</script>
</head>
<body>
<h1>Calculating plain roof tiles</h1>
<p>Please use our online calculator to calculate an estimate of how many plain roof tiles you need for the whole of a gable to gable roof. The calculator makes three measurements to calculate the amount needed:</p>
<h3><strong>Plain roof tile calculator</strong></h3>
<p> </p>
Enter length of the roof (eaves length): <input type="text" id="value1" name="value1" size = 7 value""/>cm
<P>
Enter length of the gable end roof verge: <input type="text" id="value2" name="value2" size = 5 value""/>cm
<P>
How many plain roof tiles per square metre: <input type="text" id="value3" name="value3" size = 1 value""/>
<P>
<input type="button" name="Submit" value="Calculate tiles needed" onclick="javascript:measurements()"/>
<P>
Half of the roof area is <input type="text" id="answer" name="answer" size = 1 value"/> m2. The whole roof area is <input type="text" id="answer2" name="answer2" size = 1 value"/> m2
<P>
<h4><strong>The whole roof:</strong></h4>
<B>
<P>
Approximately <input type="text" id="answer3" name="answer3" size = 2 value"/> plain roof tiles are needed for this type of roof (including 5% wastage)</B> 
<P>
Please note that this is an approximate estimation based on a mathematical formula. If you need a more accurate figure we recommend that you carry out your own independent calculation
<P>
</body>
</html>

Scenario 1 applies to the m2 calculations in my calculator and scenario 2 applies to the amount of roof tiles needed

Hope I am not asking too much, I try to search and try as much as I can but after spending all day on it I am really stuck

Thanks in advance

Jamie
 
Sort by date Sort by votes
document.write just outputs to the screen , if you don't want that you can just not use it. As far as Math.round() well you use it where you want to round.

For instance, and using one of your lines:

Code: 
ans1.value = [red]Math.round([/red](val1*val2) /10000);

in JS Math.round() will round a number to the nearest integer. that is 3.26 will become 3 , 44.75 will be 45, etc...
If you want to preserve decimals to a certain number of places, you need to do extra calculations.

Code: 
var original=28.453;
var result=Math.round(original*100)/100  //returns 28.45

You need to multiply the number by 10 to the power of the number of decimals you want to have. S if you want to round to 3 decimals 10 to the power of 3 or 1000. 2 decimals 10 to the power of 2 or 100. etc.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
I guess searching is all about knowing the right keywords to use, as I found this great example on how to round to any number of decimal places as the first hit on Google for the keywords "javascript round decimal":


You could take it further still and investigate Math.pow if you didn't want to hard-code the number of decimals (although in your case it's probably always 2).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hi

Thanks a lot for the response it has worked like a charm in the sense that I can round up figures and restrict to set decimal places

The only problem that I have spotted is that when a user enters a decimal number in my calculator my code only seems to be taking the first number in the decimal causing problems in calculation e.g 2.9 * 5 = 14.5can which is correct but the same calcultions using my calculator returns a result of 10!!

Can a javascript variable store the users entered decimal number for calculation?

(This is also the case without any math.round code aswell)

Any ideas, im guessing the variable needs to be declared as a decimal somewhere?

Regards

Jamie
 
Upvote 0 Downvote
Think I have worked this one out

Using parseFloat instead of parseInt seems to do it :)
 
Upvote 0 Downvote
Try the toFixed(n) function - this appears to give you what you want.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<script>

function init() {

/*
If a calculation returns a number e.g 3.56234, how can the number be rounded to 3.60?

Scenario 2: - Rounding up to a whole number

If a calculation returns a number e.g 27.7698, how can it be rounded to 28?
*/

var a = 3.56234; 
var a1 = a.toFixed(1) * 1;
var b = 27.7698;

alert(a.toFixed(1)); //3.6
alert(a1.toFixed(2)); //3.60
alert(b.toFixed(0)); //28

}
</script>

</head>

<body onload="init()">
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
416
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
306
Rayj0000
Rayj0000
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
523
xwb
xwb
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
347
lexer
lexer
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
314
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top