Assist with JS app where formula result has a bunch of 9s on the end

Question

Hello I built a very simple Js app to have a cash register on a webpage... Just experimenting and learning about JS... anyways, basically there are 4 items (eggs, milk etc) loaded in with prices etc... using dropdowns you can select an item and quantity and hit the "clickme8 button". this updates the total and also i am working on creating a table that shows all of the items with all details for each line; everything is working fine; but something bizarre is happening if I input eggs with quantity of "7"; i calculate the extended price for that line by taking the quantity times the unit price

var extend1=gman3[i][1]*gman3[i][2];

this mostly works fine; but if i enter eggs with quantity of 7; the extended price calculated ends with a bunch of 9s...

I have no idea what is causing this, I am sure I am missing something or have something wrong. I have tried finding an answer but can find nothing like this out there. Here is the entire app:

<?php
?>
<script>
var cashRegister = {

total:0,

lastTransactionAmount: 0,

testg1: [],
testg2: [],


add: function(itemCost){
    this.total += (itemCost || 0);
    this.lastTransactionAmount = itemCost;
},


scan: function(item,quantity){
    switch (item){
    case "eggs": this.add(0.98 * quantity); 
    price=0.98;
    break;
    case "milk": this.add(1.23 * quantity); 
    price=1.23;
    break;
    case "magazine": this.add(4.99 * quantity); 
    price=4.99;
    break;
    case "chocolate": this.add(0.45 * quantity); 
    price=0.45;
    break;
    }
    this.testg1=[item,quantity,price];

    this.testg2.push(this.testg1);

    return true;
},


voidLastTransaction : function(){
    this.total -= this.lastTransactionAmount;
    this.lastTransactionAmount = 0;
}




};

// Show the total bill

</script>

Select the quantity:<br/>

<select id="quantity">
<?php
for ($i=1;$i<=10;$i++) {
    ?>
    <option value="<?php echo $i; ?>">
        <?php echo $i; ?>

    </option>
    <?php

}
?>
</select>

<br/>
Select the item:<br/>
<select id="item">
    <option value="eggs">Eggs</option>
    <option value="milk">Milk</option>
    <option value="magazine">Magazine</option>
    <option value="chocolate">Chocolate</option>
</select>

<br/>
<br/>
<button onclick="myFunction2()">Click me8</button>

<script>


function myFunction2(cashRegister) {

    var e = document.getElementById("quantity");
var quantity1 = e.options[e.selectedIndex].value;

var e2 = document.getElementById("item");
var item1 = e2.options[e2.selectedIndex].value;

if (typeof window.cashRegister !== 'undefined') {
// the variable is defined
var gtype = typeof window.cashRegister;

}

else {
var gtype = "undefined";

}



window.cashRegister.scan(item1,quantity1);

var gtotal = window.cashRegister.total.toFixed(2);

var gman1 = "<br/><br/>" + window.cashRegister.testg2;

var gman3=window.cashRegister.testg2;

var output2="<table>";

for (i=0;i<gman3.length;i++) {

var extend1=gman3[i][1]*gman3[i][2];

var line=i+1;

output2 += 
"<tr>" +
"<td>" + line +"</td>"+
"<td>" + gman3[i][1] +"</td>"+
"<td>" + gman3[i][0] +"</td>"+
"<td>" + "$"+gman3[i][2] +"</td>"+
"<td>" + "$"+extend1 +"</td>"+
"</tr>";


}

output2+="<tr><td>Total</td>" + "<td>"+gtotal+"</td>"


output2+="</table>";

 document.getElementById('total1').innerHTML += '<br>' + quantity1 + " " + 
 item1;


document.getElementById('total2').innerHTML = '<br>Total' + gtotal + 
"&nbsp;" + gman1 + output2;
}
</script>
<br/>
<br/>
<div id="total1">
</div>
<div id="total2">
</div>

Possible duplicate of [How to deal with floating point number precision in JavaScript?](https://stackoverflow.com/questions/1458633/how-to-deal-with-floating-point-number-precision-in-javascript) — mustaccio, Jun 18 '17 at 16:32
thanks for your input and the link, this helped me understand to some extent what is going on... — gman_donster, Jun 18 '17 at 17:07

score 1 · Accepted Answer · answered Jun 18 '17 at 16:30

1

Some math results will have a bunch of 9's in the end. You can do this:

add: function(itemCost){
    itemCost = (itemCost).toFixed(2); //This makes a number have 2 decimals places. For example: 9.99999 comes to 9.99
    this.total += (itemCost || 0);
    this.lastTransactionAmount = itemCost;
},

answered Jun 18 '17 at 16:30

Renan Souza

905
9
25

thanks, this answer pointed me in the right direction, I was not able to get it to work at first, but when I applied the "toFixed" directly to the extended price that worked fine... – gman_donster Jun 18 '17 at 17:09
:D If that helped you, I'd be glad if you accepted my answer! Thanks. – Renan Souza Jun 18 '17 at 17:14

Assist with JS app where formula result has a bunch of 9s on the end

1 Answers1