Earlier I had an issue with transferring data between html pages but I luckily got help. However, I'm having some trouble displaying certain prices taken from a shopping cart page, and displaying them in the checkout page. They way I am doing this is with local browser storage and I was informed that this can be done with multiple instances, but I must be missing something.
//table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Html Table</h2>
<table id="EstoreTable" style="width:100%">
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>iPhone X</td>
<td>10</td>
<td>299.99</td>
</tr>
<tr>
<td>Apple Watch 3</td>
<td>12</td>
<td>250.00</td>
</tr>
<tr>
<td>MacBook Pro 13" </td>
<td>7</td>
<td>1199.99</td>
</tr>
</table>
<a href="assign1_agm75_checkout.html" target="_blank" id="checkout">Checkout</a>
<script src="CheckoutAmounts.js"></script>
</body>
</html>
//js file
function getCheckoutAmounts()
{
var table = document.getElementById('EstoreTable'); //data from TestTable.html
var sum = 0,
taxTotal = 0,
tax = .0825,
shipping = 5.99,
due = 0;
for (var i = 1; i < table.rows.length; i++)
{
sum = sum + parseFloat(table.rows[i].cells[2].innerHTML); //stores total price into sum
}
taxTotal = tax * sum; //stores calculated tax
due = sum + taxTotal + shipping;
// SET VIA query string
this.href += "?sum=" + sum;
this.href += "?taxTotal=" + taxTotal;
this.href += "?shipping=" + shipping;
this.href += "?due=" + due;
// SET SUM VIA localStorage
window.localStorage.setItem("sum", sum);
window.localStorage.setItem("taxTotal", taxTotal);
window.localStorage.setItem("shipping", shipping);
window.localStorage.getItem("due", due);
}
document.querySelector("#checkout").addEventListener("click", getCheckoutAmounts);
//Checkout.html
<html>
<h1>Checkout</h1>
Total Shopping Amount: $<span id="Shopamount"></span><br>
Total Tax: $<span id="TaxTotal"></span><br>
Total Shipping Charges: $<span id= "charges"></span><br>
Total Amount Due: $<span id="total"></span><br>
<script>
// GET data VIA localStorage
document.querySelector("#Shopamount").textContent = window.localStorage.getItem("sum");
document.querySelector("#TaxTotal").textContent = window.localStorage.getItem("taxTotal");
document.querySelector("#charges").textContent = window.localStorage.getItem("shipping");
document.querySelector("#total").textContent = window.localStorage.getItem("due");
// GET SUM VIA query string
let queryString = document.location.search;
let sum = queryString.split("=")[1];
let taxTotal = queryString.split("=")[1];
let shipping = queryString.split("=")[1];
let due = queryString.split("=")[1];
document.querySelector("#Shopamount").textContent = sum;
document.querySelector("TaxTotal").textContent = taxTotal;
document.querySelector("charges").textContent = shipping;
document.querySelector("total").textContent = due;
</script>
Total Shopping Amount: $ $1749.98?taxTotal
Total Tax: $144.37335000000002
Total Shipping Charges: $5.99
Total Amount Due: $
However, when I run the JS, this is my result in checkout.html .There are other parts to the checkout.html so that's why there's no closing tag.
