Read the following problem:
You order some groceries online and buy 5 things:
The website calculates the price and it is displayed as the "Subtotal".
The website charges 11% sales tax and it is displayed as the "Sales tax".
The overall price is calculated and it is displayed as the "Total price".
Based on the following HTML:
<table>
<caption>Details</caption>
<thead>
<tr><th>Item</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Yellow Corn
Tortillas</td><td
id="price1">3.32</td></tr>
<tr><td>Cheddar
Cheese</td><td
id="price2">5.89</td></tr>
<tr><td>Avocados</td><td
id="price3">4.41</td></tr>
<tr><td>Cilantro</td><td
id="price4">0.99</td></tr>
<tr><td>Jalapeno
pepper</td><td
id="price5">0.39</td></tr>
</tbody>
<table>
<table>
<caption>Totals</caption>
<tbody>
<tr><td>Subtotal</td><td
id="subtotal"></td></tr>
<tr><td>Sales
tax</td><td
id="salestax"></td></tr>
<tr><td>Total
price</td><td
id="total"></td></tr>
</tbody>
<table>
<p></p>
Write a JavaScript function to read the grocery item prices from the above HTML, calculate the Subtotal, Tax, and Total price, and then output the results back into the HTML.
Yes, write some JavaScript for this question!
HTML Editor Keyboard Shortcuts
Please find the code and sample outputs
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<caption>Details</caption>
<thead>
<tr><th>Item</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Yellow Corn Tortillas</td><td
id="price1">3</td></tr>
<tr><td>Cheddar Cheese</td><td
class="price"id="price2">2</td></tr>
<tr><td>Avocados</td><td
class="price"id="price3">4</td></tr>
<tr><td>Cilantro</td><td
class="price"id="price4">1</td></tr>
<tr><td>Jalapeno pepper</td><td
class="price"id="price5">90</td></tr>
</tbody>
<table>
<table>
<caption onclick="sumTable()">Totals</caption>
<tbody>
<tr><td>Subtotal</td><td
id="subtotal"></td></tr>
<tr><td>Sales tax</td><td
id="salestax"></td></tr>
<tr><td>Total price</td><td
id="total"></td></tr>
</tbody>
<table>
<p></p>
<script type="text/javascript">
function sumTable() {
var a =
document.getElementById("price1").innerHTML;
var b =
document.getElementById("price2").innerHTML;
var c =
document.getElementById("price3").innerHTML;
var d =
document.getElementById("price4").innerHTML;
var e =
document.getElementById("price5").innerHTML;
var SubTotal = parseFloat(a) +
parseFloat(b) + parseFloat(c) + parseFloat(d) +
parseFloat(e);
console.log(SubTotal);
var salesTax = parseFloat(SubTotal)
* parseFloat(.11);
console.log(salesTax)
var Total = SubTotal +
salesTax;
console.log(Total);
document.getElementById("subtotal").innerHTML = SubTotal;
document.getElementById("salestax").innerHTML = salesTax;
document.getElementById("total").innerHTML = Total;
}
</script>
</body>
</html>


Please comment for any further clarifications.
Read the following problem: You order some groceries online and buy 5 things: Yellow Corn Tortillas...
I need help writting a Javascript function that does the
following its for a HTML/CSS Shopping Cart Page
CODE
This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...