Make <div> to display only 2 decimals after whole numbers in javascript - calculator

Question

I know this kind of topic has been asked several times but non of the answers that I had found had worked with my javascript code. Everything in my page is fine. The web page that I have is about shopping list but not including the product name because there's no space in the web page for that, just for the price and tax, a calculator and to be used in a cell phone because is the cell phone the device that you can use in a supermarket. You make the price additions on the left column and write down the taxes in the right column. The total price is displayed in a <div> that is at the top of the page says 0 in red color. Like I expressed before, everything in the page is fine, is just that I want that <div> to display only 2 decimal digits after whole numbers. Let say you type: 4.65 in one of the textboxes on the left column because that's the product price and .28 on the right column because that is the tax. (Now in FL tax is .07) So, the total instead of showing up 4.93 it shows 4.930000000000001 and that's annoying for me. The same thing also happens in the calculator but that's fine for me.
The shopping list web page is: https://keilita.neocities.org/shop-calc.htm Thank you.

Answer 1

The problem lies in the fact that floating point numbers are actually approximations (except in those cases when they're multiples of negative powers of two, e.g., .75, .125 and the like). You should be able to do something like total.toFixed(2) to get the desired result (note that you'd also need this for cases like 3.10 to display correctly).

Answer 2

<script language="javascript">
function bindFunctions() {
var input = document.getElementsByTagName("input");
for(var i=0; i<input.length;i++){
if(input[i].type == "number"){
input[i].onblur = onBlurFunction;
}
if(input[i].type == "submit"){
input[i].onclick = onClickFunction;
}
}
}
bindFunctions();
function onBlurFunction(){
var ttl=0;
var input = document.getElementsByTagName("input");
for(var i=0; i<input.length;i++){
if(input[i].type == "number"){
ttl += Number(input[i].value);
}
}
document.getElementById("totales").innerHTML=ttl;
}
function onClickFunction(){
var inputHolder = document.getElementById('input-holder');
var input = document.createElement('input');
var br = document.createElement("br");
input.type = "number";
inputHolder.appendChild(input);
inputHolder.appendChild(br);
bindFunctions();
}
</script>