I'm having an issue with structuring a table within a for-loop. I'm trying to setup my code so that when I click on the 'Display Quantity Pricing' button that the entire discount pricing list will appear neatly in a table, however, I made my discounted price list with a for-loop (as I was instructed to) and do not understand how to make the contents of that for-loop appear in a table. The table should look something like this: https://i.stack.imgur.com/BmBNc.jpg
Here is my code with my professor's given table structure in the style tags at the top. I already tried messing with table code right above my for-loop code to try and make the table's header at line 50 but it doesn't look like my professor's example. Any help would be greatly appreciated:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A4P4 by Me</title>
<style>
body {
background-color: beige;
}
#pricingTable { border:2px #666 solid; border-collapse; }
#pricingTable th { font-weight: bold; text-align: right; padding:5px; border-right: 1px #BBB solid;}
#pricingTable td { text-align:right; padding:5px; border-right: 1px #BBB solid;}
#pricingTable tr:nth-child(odd) {background: #DDD}
</style>
<script>
const SEGA_P = 59.99;
const NINT_P = 79.99;
const TAX_RATE = 0.08;
const PROD1 = 'Sega Mega Drive Mini';
const PROD2 = 'Super Nintendo Classic Mini';
function processOrder(){
var name = document.getElementById('txtName').value;
var quant1 = document.getElementById('txtQ1').value;
var quant2 = document.getElementById('txtQ2').value;
var sega_c = SEGA_P * quant1;
var nint_c = NINT_P * quant2;
var total_c = sega_c + nint_c;
var tax = total_c * TAX_RATE;
var total_balance = total_c + tax;
if(quant1 >= 10)
{
sega_c = (quant1*SEGA_P-((quant1*SEGA_P)/10));
total_c = parseFloat(sega_c) + parseFloat(nint_c);
tax = total_c * TAX_RATE;
total_balance = total_c + tax;
document.getElementById("receipt").innerHTML = name + ", thank you for your order of " + quant1 + " " + PROD1 + "s and " + quant2 + " " + PROD2 + "s!<br>" + quant1 + " " + PROD1 + "s @" + SEGA_P + " each = $" + sega_c.toFixed(2) + " **quantity discount applied**<br>" + quant2 + " " + PROD2 + "s @" + NINT_P + " each = $" + nint_c.toFixed(2) + "<br>" + "Subtotal: $" + total_c.toFixed(2) + "<br>" + "Tax $" + tax.toFixed(2) + "<br>" + "Total Balance: $" + total_balance.toFixed(2);
}
else
{
document.getElementById("receipt").innerHTML = name + ", thank you for your order of " + quant1 + " " + PROD1 + "s and " + quant2 + " " + PROD2 + "s!<br>" + quant1 + " " + PROD1 + "s @" + SEGA_P + " each = $" + sega_c.toFixed(2) + "<br>" + quant2 + " " + PROD2 + "s @" + NINT_P + " each = $" + nint_c.toFixed(2) + "<br>" + "Subtotal: $" + total_c.toFixed(2) + "<br>" + "Tax $" + tax.toFixed(2) + "<br>" + "Total Balance: $" + total_balance.toFixed(2);
}
}
function quantPricing(){
//Table should be formed here:
document.getElementById("quant_price").innerHTML = ("<br><h3>Quantity Discount Pricing on " + PROD1 + "s<br>");
document.getElementById("quant_price2").innerHTML = ('<table border="1"><tr><th>#</th><th>Quantity -- Normal Pricing -- Discount Pricing"</th></tr>');
for(var num=10; num<=100; num+=10){
document.getElementById("quant_price3").innerHTML += ("<br>----" + num + " -------- $" + (num*SEGA_P).toFixed(2) + " -------- $" + (num*SEGA_P-((num*SEGA_P)/10)).toFixed(2));
}
}
</script>
</head>
<body>
<h1>A4P4 My 90s Gamers Market</h1>
<p>Return to the glory days of gaming at My 90s Gaming Market!</p>
<p>This months specials:</p>
<form>
<table border="1" cellspacing="0" cellpadding="6" summary="Table of product images, prices & descriptions">
<tbody>
<tr>
<td> </td>
<td> </td>
<td>Please enter your name:<br><input type="text" id="txtName" name="txtName">
</td>
</tr>
<tr>
<td><img src="sega_mega_drive_mini.png" width="312" height="212" alt="Sega Mega Drive Mini"></td>
<td>
<script>
document.write("<b>$" + SEGA_P + " Sega Mega Drive Mini</b><br><br>");
document.write("This is a modern day remake of the popular 90s video Game Console, the Sega Mega Drive (also known as Sega Genesis in the USA). This HDMI supported console comes with 2 retro gaming controllers with 40 bundled games all for the low price of $" + SEGA_P + "!");
</script>
</td>
<td>Quantity:<br><input type="text" id="txtQ1" name="txtQ1"></td>
</tr>
<tr>
<td><img src="snes_mini_01_1218.jpg" width="312" height="212" alt="Super Nintendo Classic Mini"></td>
<td>
<script>
document.write("<b>$" + NINT_P + " Super Nintendo Classic Mini</b><br><br>");
document.write("This is a modern day remake of the popular 90s video Game Console, the Super Nintendo. This HDMI supported console comes with 2 retro gaming controllers with 21 bundled games all for $" + NINT_P + "!")
</script>
</td>
<td>Quantity:<br><input type="text" id="txtQ2" name="txtQ2">
</td>
</tr>
</tbody>
</table>
<p>
<input type="button" value="Process Order" id="btnProcess">
<input type="button" value="Display Quantity Pricing" id="btnPricing">
</p>
</form>
<div id="receipt">This is where output will go. </div>
<div id="quant_price"></div>
<div id="quant_price2"></div>
<div id="quant_price3"></div>
<script>
document.getElementById("btnProcess").addEventListener("click", processOrder);
document.getElementById("btnPricing").addEventListener("click", quantPricing);
</script>
</body></html>
