I have made an order form in java and html css everything was going well until I decided to put some styling in my code and now it doesn’t reset post it basically does nothing its probably something small but I cant find it even when I use the javascript console.
It needs to show the amount and I need to add a discount that only works on monday and Friday
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Order Form</title> <link href="pl.css" rel="stylesheet"> <style> </style> </head> <body> <h1><span class="blue"><</span>faiz<span class="blue">></span> <span class="yellow">pizza</span></h1> <form> <table class="container"> <thead> <tr> <th><h1>Pizza</h1></th> <th><h1>Image</h1></th> <th><h1>Quantity</h1></th> <th><h1>Price</h1></th> <th><h1>Total</h1></th> </tr> </thead> <tbody> <tr> <td>margherita</td> <td><img src="Pizza_Margherita_stu_spivack-removebg-preview.png" alt="margherita" height="400" width="400"></td> <td><input type="text" id="QtyA"></td> <td>€3.00</td> <td id="TotalA"></td> </tr> </tr> <tr> <td>Tuna</td> <td><img src="Tuna_Treat-7268.png" alt="Tuna" height="400" width="400"></td> <td><input type="text" id="QtyB"></td> <td>€14.00</td> <td id="TotalB"></td> </tr> <tr> <td>fourcheese</td> <td><img src="4_Cheese-7262.png" alt="fourcheese"></td> <td><input type="text" id="QtyC"></td> <td>€5.50</td> <td id="TotalC"></td> </tr> <tr> <td>double pepperoni</td> <td><img src="Double_Pepperoni-7260.png" alt="pep" height="400" width="400"></td> <td><input type="text" id="QtyD"></td> <td>€5.50</td> <td id="TotalD"></td> </tr> <tr> <td>pizza</td> <td>ef</td> <td>fwrf</td> <td>ref</td> </tr> <tr> <td>refe</td> <td>erf</td> <td>erf</td> <td>ref</td> </tr> <tr> <td><input type="button" value="Get Grand Total"></td> <input type="reset" value="Reset"></td> </tr> </tbody> </table> </form>
Javascript
<script> var qtyBoxA = document.getElementById('QtyA'); var qtyBoxB = document.getElementById('QtyB'); var qtyBoxC = document.getElementById('QtyC'); var qtyBoxD = document.getElementById('QtyD'); var totBoxA = document.getElementById('TotalA'); var totBoxB = document.getElementById('TotalB'); var totBoxC = document.getElementById('TotalC'); var totBoxD = document.getElementById('TotalD'); var grandTot = document.getElementById('grandTotal'); var btnGetTot = document.querySelector("input[type=button]"); var btnReset = document.querySelector("input[type=reset]"); qtyBoxA.addEventListener("change", calc); qtyBoxB.addEventListener("change", calc); qtyBoxC.addEventListener("change", calc); qtyBoxD.addEventListener("change", calc); btnGetTot.addEventListener("click", getGrandTotal); btnReset.addEventListener("click", reset); var gt = null; function calc() { var priceA = 3; var priceB = 4; var priceC = 5.50; var priceD = 5.50; gt = 0; var qtyA = parseInt(qtyBoxA.value, 10); var qtyB = parseInt(qtyBoxB.value, 10); var qtyC = parseInt(qtyBoxC.value, 10); var qtyD = parseInt(qtyBoxD.value, 10); if (!isNaN(qtyA)) { totBoxA.textContent = qtyA * priceA; gt += +totBoxA.textContent; } if (!isNaN(qtyB)) { totBoxB.textContent = qtyB * priceB; gt += +totBoxB.textContent; } if (!isNaN(qtyC)) { totBoxC.textContent = qtyC * priceC; gt += +totBoxC.textContent; } if (!isNaN(qtyD)) { totBoxD.textContent = qtyD * priceD; gt += +totBoxD.textContent; } grandTot.textContent = gt.toFixed(2); } function getGrandTotal(){ calc(); alert(gt); } function reset(){ totBoxA.textContent = ""; totBoxB.textContent = ""; totBoxC.textContent = ""; totBoxD.textContent = ""; grandTot.textContent = ""; } </script> </body> </html>
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); body { font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 1.42em; color:#A7A1AE; background-color:#1F2739; } h1 { font-size:3em; font-weight: 300; line-height:1em; text-align: center; color: #4DC3FA; } h2 { font-size:1em; font-weight: 300; text-align: center; display: block; line-height:1em; padding-bottom: 2em; color: #FB667A; } h2 a { font-weight: 700; text-transform: uppercase; color: #FB667A; text-decoration: none; } .blue { color: #185875; } .yellow { color: #FFF842; } .container th h1 { font-weight: bold; font-size: 1em; text-align: left; color: #185875; } .container td { font-weight: normal; font-size: 1em; -webkit-box-shadow: 0 2px 2px -2px #0E1119; -moz-box-shadow: 0 2px 2px -2px #0E1119; box-shadow: 0 2px 2px -2px #0E1119; } .container { text-align: left; overflow: hidden; width: 80%; margin: 0 auto; display: table; padding: 0 0 8em 0; } .container td, .container th { padding-bottom: 2%; padding-top: 2%; padding-left:2%; } /* Background-color of the odd rows */ .container tr:nth-child(odd) { background-color: #323C50; } /* Background-color of the even rows */ .container tr:nth-child(even) { background-color: #2C3446; } .container th { background-color: #1F2739; } .container td:first-child { color: #FB667A; } .container tr:hover { background-color: #464A52; -webkit-box-shadow: 0 6px 6px -6px #0E1119; -moz-box-shadow: 0 6px 6px -6px #0E1119; box-shadow: 0 6px 6px -6px #0E1119; } .container td:hover { background-color: #FFF842; color: #403E10; font-weight: bold; box-shadow: #7F7C21 -1px 1px, #7F7C21 2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px; transform: translate3d(6px, -6px, 0); transition-delay: 0s; transition-duration: 0.4s; transition-property: all; transition-timing-function: line; } @media (max-width: 800px) { .container td:nth-child(4), .container th:nth-child(4) { display: none; } }
Advertisement
Answer
After fixing a lot of things in your code, it works 🙂
The main issue was within your code logic, you just blindly copied the code without knowing how it works.
You are getting this element but it didn’t exists var grandTot = document.getElementById('grandTotal');
and rest of the code in getGrandTotal()
didn’t work because of the null error.
I Just added this line in html and created that element with id grandTotal
<td id="grandTotal"></td>
var qtyBoxA = document.getElementById('QtyA'); var qtyBoxB = document.getElementById('QtyB'); var qtyBoxC = document.getElementById('QtyC'); var qtyBoxD = document.getElementById('QtyD'); var totBoxA = document.getElementById('TotalA'); var totBoxB = document.getElementById('TotalB'); var totBoxC = document.getElementById('TotalC'); var totBoxD = document.getElementById('TotalD'); var grandTot = document.getElementById('grandTotal'); var btnGetTot = document.querySelector("input[type=button]"); var btnReset = document.querySelector("input[type=reset]"); qtyBoxA.addEventListener("change", calc); qtyBoxB.addEventListener("change", calc); qtyBoxC.addEventListener("change", calc); qtyBoxD.addEventListener("change", calc); btnGetTot.addEventListener("click", getGrandTotal); btnReset.addEventListener("click", reset); var gt = null; function calc() { var priceA = 3; var priceB = 4; var priceC = 5.50; var priceD = 5.50; gt = 0; var qtyA = parseInt(qtyBoxA.value, 10); var qtyB = parseInt(qtyBoxB.value, 10); var qtyC = parseInt(qtyBoxC.value, 10); var qtyD = parseInt(qtyBoxD.value, 10); if (!isNaN(qtyA)) { totBoxA.textContent = qtyA * priceA; gt += +totBoxA.textContent; } if (!isNaN(qtyB)) { totBoxB.textContent = qtyB * priceB; gt += +totBoxB.textContent; } if (!isNaN(qtyC)) { totBoxC.textContent = qtyC * priceC; gt += +totBoxC.textContent; } if (!isNaN(qtyD)) { totBoxD.textContent = qtyD * priceD; gt += +totBoxD.textContent; } grandTot.textContent = gt.toFixed(2); } function getGrandTotal() { calc(); } function reset() { totBoxA.textContent = ""; totBoxB.textContent = ""; totBoxC.textContent = ""; totBoxD.textContent = ""; grandTot.textContent = ""; }
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700); body { font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 1.42em; color: #A7A1AE; background-color: #1F2739; } h1 { font-size: 3em; font-weight: 300; line-height: 1em; text-align: center; color: #4DC3FA; } h2 { font-size: 1em; font-weight: 300; text-align: center; display: block; line-height: 1em; padding-bottom: 2em; color: #FB667A; } h2 a { font-weight: 700; text-transform: uppercase; color: #FB667A; text-decoration: none; } .blue { color: #185875; } .yellow { color: #FFF842; } .container th h1 { font-weight: bold; font-size: 1em; text-align: left; color: #185875; } .container td { font-weight: normal; font-size: 1em; -webkit-box-shadow: 0 2px 2px -2px #0E1119; -moz-box-shadow: 0 2px 2px -2px #0E1119; box-shadow: 0 2px 2px -2px #0E1119; } .container { text-align: left; overflow: hidden; width: 80%; margin: 0 auto; display: table; padding: 0 0 8em 0; } .container td, .container th { padding-bottom: 2%; padding-top: 2%; padding-left: 2%; } /* Background-color of the odd rows */ .container tr:nth-child(odd) { background-color: #323C50; } /* Background-color of the even rows */ .container tr:nth-child(even) { background-color: #2C3446; } .container th { background-color: #1F2739; } .container td:first-child { color: #FB667A; } .container tr:hover { background-color: #464A52; -webkit-box-shadow: 0 6px 6px -6px #0E1119; -moz-box-shadow: 0 6px 6px -6px #0E1119; box-shadow: 0 6px 6px -6px #0E1119; } .container td:hover { background-color: #FFF842; color: #403E10; font-weight: bold; box-shadow: #7F7C21 -1px 1px, #7F7C21 2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px; transform: translate3d(6px, -6px, 0); transition-delay: 0s; transition-duration: 0.4s; transition-property: all; transition-timing-function: line; } @media (max-width: 800px) { .container td:nth-child(4), .container th:nth-child(4) { display: none; } }
<h1> <span class="blue"><</span>faiz <span class="blue">></span> <span class="yellow">pizza</span> </h1> <form> <table class="container"> <thead> <tr> <th> <h1>Pizza</h1> </th> <th> <h1>Image</h1> </th> <th> <h1>Quantity</h1> </th> <th> <h1>Price</h1> </th> <th> <h1>Total</h1> </th> </tr> </thead> <tbody> <tr> <td>margherita</td> <td> <img src="Pizza_Margherita_stu_spivack-removebg-preview.png" alt="margherita" height="400" width="400"> </td> <td> <input type="text" id="QtyA"> </td> <td>€3.00</td> <td id="TotalA"></td> </tr> </tr> <tr> <td>Tuna</td> <td> <img src="Tuna_Treat-7268.png" alt="Tuna" height="400" width="400"> </td> <td> <input type="text" id="QtyB"> </td> <td>€14.00</td> <td id="TotalB"></td> </tr> <tr> <td>fourcheese</td> <td> <img src="4_Cheese-7262.png" alt="fourcheese"> </td> <td> <input type="text" id="QtyC"> </td> <td>€5.50</td> <td id="TotalC"></td> </tr> <tr> <td>double pepperoni</td> <td> <img src="Double_Pepperoni-7260.png" alt="pep" height="400" width="400"> </td> <td> <input type="text" id="QtyD"> </td> <td>€5.50</td> <td id="TotalD"></td> </tr> <tr> <td>pizza</td> <td>ef</td> <td>fwrf</td> <td>ref</td> </tr> <tr> <td>refe</td> <td>erf</td> <td>erf</td> <td>ref</td> </tr> <tr> <td> <input type="button" value="Get Grand Total"> </td> <td> <input type="reset" value="Reset"> </td> <td id="grandTotal"></td> <!--- This is the line I added ----> </tr> </tbody> </table> </form>
Good Luck 🙂