Rounding Numbers with JavaScript [duplicate]
Clash Royale CLAN TAG#URR8PPP
Rounding Numbers with JavaScript [duplicate]
This question already has an answer here:
I implemented a vehicle VIN decoder API into my app. When a vehicle's VIN is entered into the input box and submit is selected, it returns basic data for that specific vehicle. Sometimes displacement is returned as a number with many decimal places. I would like to edit this, round this number to one decimal place.
If this VIN is entered: WAUUL78E38A092113 it returns this data:
Manufacturer: AUDI
Year: 2008
Make: AUDI
Model: S4
Body Style: Wagon
Displacement: 4.163000
Number of Cylinders: 8
Horsepower: 344
Displacement should read: 4.2 while it is displayed as 4.163000
How can I create a command that rounds all displacement figures to one decimal place?
This question is different to others in that I want every "#t6" value to be rounded, not just a single number. If a VIN is entered for a vehicle with a displacement of 3.67, that needs to be rounded to 3.7. If a VIN is entered for a vehicle with a displacement of 5.87, that needs to be rounded to 5.9. And so on...
My issue therefore lies in creating a function that rounds all displacements; thus, I need help creating a function that is tied to the "#t6" ID.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>VIN Decoder API Test</title>
<style type="text/css">
input width: 200px;
.border border:1px solid black
textarea display: block;margin-left:auto;margin-right: auto;
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$("#submit_btn").click(function ()
var val = $("#b12").val();
$.ajax(
url: "https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVINValuesBatch/",
type: "POST",
data: format: "json", data: val,
dataType: "json",
success: function(result)
$("#t1").text(result.Results[0].Manufacturer);
$("#t2").text(result.Results[0].ModelYear);
$("#t3").text(result.Results[0].Make);
$("#t4").text(result.Results[0].Model);
$("#t5").text(result.Results[0].BodyClass);
$("#t6").text(result.Results[0].DisplacementL);
$("#t7").text(result.Results[0].EngineCylinders);
$("#t8").text(result.Results[0].EngineHP);
const input1 = (result.Results[0].ModelYear);
const input2 = (titleCase(result.Results[0].Make));
const input3 = (result.Results[0].Model);
const input5 = (result.Results[0].EngineCylinders);
const input6 = (result.Results[0].EngineHP);
const input7 = (result.Results[0].DisplacementL);
document.getElementById("t2a").value =
"Up for sale is a "+input1+" "+input2+" "+input3+". The "+input3+" produces "+input6+" horsepower from a "+input7+" liter "+input5+" cylinder engine."
,
error: function(xhr, ajaxOptions, thrownError)
console.log(xhr.status);
console.log(thrownError);
);
)
);
function titleCase(str, spliters = [' ']) '').toString().toLowerCase();
if(str === 'bmw')
return str.toUpperCase();
if(str === 'ram')
return str.toUpperCase();
if (str === 'mercedes-benz')
return "Mercedes-Benz";
spliters.forEach(spliter =>
str = str.split(spliter).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
);
return str;
function hideHi()
document.getElementById("t1a").style.display = "none";
document.getElementById("t2a").style.display = "none";
function showResults()
document.getElementById("t1a").style.display = "block";
document.getElementById("t2a").style.display = "block";
</script>
</head>
<body onload="hideHi()">
<table align="center">
<tr>
<td align="center">
<input type="text" id="b12" placeholder="Enter VIN" name="b12" maxlength="100"/>
</td>
</tr>
<tr>
<td align="center">
<button id="submit_btn" onclick="showResults()">Submit</button>
</td>
</tr>
</table>
<br>
<br>
<div id="t1a">
<table align="center">
<tr>
<td>Manufacturer:</td> <!--"Manufacturer"-->
<td id="t1"></td>
</tr>
<tr>
<td>Year:</td> <!--"ModelYear"-->
<td id="t2"></td>
</tr>
<tr>
<td>Make:</td> <!--"Make"-->
<td id="t3"></td>
</tr>
<tr>
<td>Model:</td> <!--"Model"-->
<td id="t4"></td>
</tr>
<tr>
<td>Body Style:</td> <!--"BodyClass"-->
<td id="t5"></td>
</tr>
<tr>
<td>Displacement:</td> <!--"DisplacementL"-->
<td id="t6"></td>
</tr>
<tr>
<td>Number of Cylinders:</td> <!--"EngineCylinders"-->
<td id="t7"></td>
</tr>
<tr>
<td>Horsepower:</td> <!--"EngineHP"-->
<td id="t8"></td>
</tr>
</table>
</div>
<br>
<textarea id="t2a" rows="15" cols="100"></textarea>
</body>
</html>
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
2 Answers
2
you can use Math.round for this:
Math.round(4.163000 * 10) / 10
OP, I suggest you wrap this in another function so the magic number 10 can be parameterized and "normalized". - e.g. be able to pass 2 instead of 100 for 2 places of precision.
– radarbob
Aug 9 at 20:11
cont ... Oh, wait! See "The question already has an answer here:", above. The selected answer has a nice function doing just that.
– radarbob
Aug 9 at 20:17
Looking for something that rounds any "#t6" value one decimal place. The 4.163 was just an example I provided.
– Phil Motto
Aug 9 at 21:13
You can use toFixed() method in Number Object
toFixed()
function roundNum(num,precision)
return Number.parseFloat(num).toFixed(precision);
console.log(roundNum(14.163000,1));
Apparently ,
toPrecision() returns a number formatted to a specified length.
toFixed() returns n length after the decimal point .
Thanks @radarbob
Hmmm, I'd read about
toFixed() in MDN carefully. First, toPrecision & toFixed round, the same way. BUT toFix parameter is "the number of digits after the decimal point" and toPrecision parameter is "the number of significant digits." So 32.163 toPrecision(2) is 32 and toFixed(2) is 32.2– radarbob
Aug 9 at 20:04
toFixed()
toPrecision
toFixed
toFix
toPrecision
toPrecision(2)
toFixed(2)
Yep. You're right.
– Madhan Varadhodiyil
Aug 9 at 20:11
@Madhan Varadhoiyil I was looking more for something that rounded all "#t6" values to the first decimal. The 4.163 was just an example.
– Phil Motto
Aug 9 at 21:11
@PhilMotto . You can define a function which takes a parameter and return this value
– Madhan Varadhodiyil
Aug 9 at 21:15
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Daniel Beck
Aug 9 at 19:47