[ad_1]
I'm creating an HTML page for a restaurant bill calculator but i'm having issues with the javascript/input/form and have been stuck for a while. I'm not sure why my function is not working when I submit. If anyone has any ideas where i'm going wrong, I would greatly appreciate any help!
Here is my current code (it has to be in one HTML document):
<body>
<h1>Restaurant Bill Calculator</h1>
<br>
<form name="billcalculator" method=post onsubmit="calculateBill()">
<div class="wrapper">
<label for="tax">Tax Percent:</label>
<input type="number" id="taxPercent" min="0" max="100" step=".01">%
<br>
<label for="price">Price from the menu:</label>
<input type="number" id="menuPrice" min="0" max="1000" step=".01">
<br>
<label for="tip">Tip Percent:</label>
<input type="number" id="tipPercent" min="0" max="200" step=".01">%
<br>
<input type="submit" onclick="calculateBill()" id="submit" value="Calculate Bill">
<br>
</div>
</form>
<p id="display">Please click Calculate Bill after completing form.</p>
<script>
function calculateBill()
var tax = document.getElementById("taxPercent")
var price = document.getElementById("menuPrice")
var tip = document.getElementById("tipPercent")
var taxamount = price * tax;
var tipamount = price * tip;
var total = taxamount + tipamount + price;
if (!tax.checkValidity())
window.alert(tax.validatonMessage);
if (!price.checkValidity()).
window.alert(price.validationMessage);
if (!tip.checkValidity())
window.alert(tip.validationMessage);
if (tax.checkValidity() && price.checkValidity() && tip.checkValidity())
document.getElementById("display").innerHTML = "Price: $" + price.toFixed(2) + "n" + "Tax: $" + taxamount.toFixed(2) + "n" + "Tip: $" + tip.toFixed(2) + "n" + "Total: $" + total.toFixed(2);
return true;
</script>
[ad_2]
لینک منبع
