 |
| I spy a bug with my little eye... |
Now, as much as I like to claim that vanilla JavaScript is my bread and butter, there are times when I make some glaring screw-ups. The simpler, the more glaring. Today is just one such example.
See, there was this time I had to tally some kind of report for goods sold, and sum the entire thing up at the bottom. Simple enough, right? So I had it on a webpage, inside a table. The calculations were correct. I'm omitting the code I used to display.
gst = (grossSales * 0.07);
sales = (grossSales * 0.93);
total = sales + gst;
document.getElementById("lblSales").innerHTML = sales;
document.getElementById("lblGst").innerHTML = gst;
document.getElementById("lblTotal").innerHTML = total;
sales = (grossSales * 0.93);
total = sales + gst;
document.getElementById("lblSales").innerHTML = sales;
document.getElementById("lblGst").innerHTML = gst;
document.getElementById("lblTotal").innerHTML = total;
And here it was! But because I had to tally 7% Goods and Service Tax (GST), inevitably there was some very long numbers. I was requested to trim it down to two decimal places. No problem. I used to toFixed() method and got it done. I also did it for the value of the variable sales.
Holy hell... the GST was correct, but now the total was one horrible mess.
What went wrong
This thankfully did not take long to figure out. The problem was right where I used to toFixed() method. I mean, duh. Everything was peachy before using the toFixed() method, right?
gst = (grossSales * 0.07).toFixed(2);
sales = (grossSales * 0.93).toFixed(2);
total = sales + gst;
document.getElementById("lblSales").innerHTML = sales;
document.getElementById("lblGst").innerHTML = gst;
document.getElementById("lblTotal").innerHTML = total;
sales = (grossSales * 0.93).toFixed(2);
total = sales + gst;
document.getElementById("lblSales").innerHTML = sales;
document.getElementById("lblGst").innerHTML = gst;
document.getElementById("lblTotal").innerHTML = total;
Here's some info on the toFixed() method if you're interested.
Why it went wrong
See, the problem is that the toFixed() method returns a string. Not a number, but a string. And therefore, if we use the "+" operator with a string in JavaScript, the system assumes that you want a string concatenation! So "52182.30" joined with "3927.70" became "52182.303927.70"!How I fixed it
I used the parseFloat() function in the final calculation, turning the string back into a decimal number, and the calculation was correct! Admittedly, while the solution was simple, I'd actually recommend being more thorough and repeating this with all the numbers just so you don't get any unpleasant surprises if any of the numbers in the equation needs to be changed.
gst = (grossSales * 0.07).toFixed(2);
sales = (grossSales * 0.93).toFixed(2);
total = (parseFloat(sales) + parseFloat(gst)).toFixed(2);
document.getElementById("lblSales").innerHTML = sales;
document.getElementById("lblGst").innerHTML = gst;
document.getElementById("lblTotal").innerHTML = total;
sales = (grossSales * 0.93).toFixed(2);
total = (parseFloat(sales) + parseFloat(gst)).toFixed(2);
document.getElementById("lblSales").innerHTML = sales;
document.getElementById("lblGst").innerHTML = gst;
document.getElementById("lblTotal").innerHTML = total;
There, everything was peachy now.
Conclusion
There's a larger lesson to be learned here. When using any kind of method or function, always be mindful of what data type the output is in.
Guess that's less one bug toFix,
T___T
T___T
No comments:
Post a Comment