Member Avatar for Amoryethel

I'm trying to use sessionStorage to pass information from a merchandise page to shopping cart page, which displays what items were purchased, how many items were purchased, cost of item, cost of subtotal, cost of total before taxes, the tax amount and after taxes. It displays the monetary value of each item, but an undefined output in "Quantity" and a NaN in "Subtotal", before taxes, tax amount and after taxes. Here's a sample of my code:

<script>
var cart7 = 4.95;

function findTotal()
{
    document.getElementById("cart7").value = cart7;
    document.getElementById("product1").value = sessionStorage.get1;
    document.getElementById("price1").value = cart7 * sessionStorage.get1;

    var beforeTax = parseInt(document.getElementById("price1").value) + parseInt(document.getElementById("price2").value) + parseInt(document.getElementById("price3").value) + parseInt(document.getElementById("price4").value) + parseInt(document.getElementById("price5").value) + parseInt(document.getElementById("price6").value);
    document.getElementById("beforeTax").value = beforeTax;

    var taxAmount = parseFloat(beforeTax * 0.074);
    document.getElementById("taxAmount").value = taxAmount.toFixed(2);

    var afterTax = beforeTax + taxAmount;
    document.getElementById("afterTax").value = afterTax;
}
<script>
<body onload="findTotal()">
<table>
                    <tr style = "text-align:center">
                        <td>
                            <h3>Product</h3>      
                        </td>
                        <td>
                            <h3>Quantity</h3>
                        </td>
                        <td>
                            <h3>Price</h3>
                        </td>
                        <td>
                            <h3>Subtotal</h3>
                        </td>

                    </tr>            
                    <tr style = "text-align:center">
                        <td>
                            We Will All Go Together sheet music     
                        </td>
                        <td>
                            &nbsp;&nbsp;<input type="text" value="0" id="product1" size="5" />
                        </td>
                        <td>
                            $<input type="text" value="0" id="cart7" size="5" />
                        </td>
                        <td>
                            $<input type="text" value="0" id="price1" size="5" />
                        </td>

                    </tr>

                    <tr style = "text-align:center"> 
                        <td>
                            Total (before taxes):<br />
                        </td>
                            <td>
                                <p><input type="text" value="0" id="beforeTax" size="5" /></p>
                            </td>
                        <tr style = "text-align:center">
                            <td>
                                Tax:<br />
                            </td>
                            <td>
                                <p><input type="text" value="0" id="taxAmount" size="5" /></p>
                            </td>
                        </tr>
                        <tr style = "text-align:center">
                            <td>
                                Total (after taxes):<br />
                            </td>
                        <td>
                            <p><input type="text" value="0" id="afterTax" size="5" /></p>
                        </td>

                    </tr>
</body>
  • 2 Contributors
  • 1 Reply
  • 256 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by ryantroop
Member Avatar for ryantroop

parseInt and parseFloat does not guarantee a number. If either of those return undefined and you do any arithmetic on it, you will get NaN.

You have here a product of bad code design.

declare your variables. check them for values after assigning them. Then do math.

ex:

var fVal;
var fPrice1, fPrice2, fPriceTotal;

fVal = document.getElementById("price1").value;
fPrice1 = fVal ? fVal : 0.00;
fVal = document.getElementById("price2");
fPrice2 = fVal ? fVal : 0.00;

//the math...

fPrice3 = fPrice1 + fPrice2; //intrinsic type check based on math operator.

If that is not your problem, I don't see anything else wrong and will have to reread it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.