Homework SourseBIG JAVASCRIPT PROBLEM Ive been working on code in html and
BIG JAVASCRIPT PROBLEM Ive been working on code in html and now and the final few parts i have to add some functions to javascript but im unsure how. sorry if this is to long but im really stuck here. Ive included the html and start of the script.
10. Code an event handler (function) named processEntries that gets the user entries, calculates the sales tax and total, and displays those results in the text boxes.
11. Code an onload event handler that attaches the processEntries function to the click event of the Calculate button. Then, test what you have so far.
12. Add data validation to the processEntries function. The subtotal entry should be a valid, positive number that’s less than 10,000. The tax rate should be a valid, positive number that’s less than 12. The error messages should be displayed in the span elements to the right of the input text boxes, and the error messages should be:
13. Must be > 0 and < 10000 Must be > 0 and < 12
<head>
<meta charset=\"utf-8\">
<title>Sales Tax Calculator</title>
<link rel=\"stylesheet\" href=\"styles.css\" />
<script src=\"sales_tax.js\"></script>
</head>
<body>
<main>
<h1>Sales Tax Calculator</h1>
<p>Enter Subtotal and Tax Rate and click \"Calculate\".</p>
<label for=\"subtotal\">Subtotal:</label>
<input type=\"text\" id=\"subtotal\" >
<span id=\"subtotal_message\">Enter order subtotal</span><br>
<label for=\"tax_rate\">Tax Rate:</label>
<input type=\"text\" id=\"tax_rate\" >
<span id=\"tax_rate_message\">Enter sales tax rate (99.9)</span><br>
<label for=\"sales_tax\">Sales Tax:</label>
<input type=\"text\" id=\"sales_tax\" disabled ><br>
<label for=\"total\">Total:</label>
<input type=\"text\" id=\"total\" disabled ><br>
<label> </label>
<input type=\"button\" id=\"calculate\" value=\"Calculate\" >
<input type=\"button\" id=\"clear\" value=\"Clear\" ><br>
</main>
</body>
</html>
var $ = function (id) { return document.getElementById(id); };
Solution
below one of the simplest way to use java script example of tax calculation that will help you sure whatever your requerment.there is some confution in you question therefore i mention general html code with java script.
<SCRIPT LANGUAGE=\"JavaScript\">
<!-- Original: Sneha
<!-- Begin
function fmtPrice(value) {
result=\"$\"+Math.floor(value)+\".\";
var cents=100*(value-Math.floor(value))+0.5;
result += Math.floor(cents/10);
result += Math.floor(cents%10);
return result;
}
function compute() {
var unformatted_tax = (document.forms[0].cost.value)*(document.forms[0].tax.value);
document.forms[0].unformatted_tax.value=unformatted_tax;
var formatted_tax = fmtPrice(unformatted_tax);
document.forms[0].formatted_tax.value=formatted_tax;
var cost3= eval( document.forms[0].cost.value );
cost3 += eval( (document.forms[0].cost.value)*(document.forms[0].tax.value) );
var total_cost = fmtPrice(cost3);
document.forms[0].total_cost.value=total_cost;
}
function resetIt() {
document.forms[0].cost.value=\"19.95\";
document.forms[0].tax.value=\".06\";
document.forms[0].unformatted_tax.value=\"\";
document.forms[0].formatted_tax.value=\"\";
document.forms[0].total_cost.value=\"\";
}
// End -->
</SCRIPT>
<CENTER>
<FORM>
<TABLE BORDER=2 WIDTH=300 CELLPADDING=3>
<TR>
<TD align=\"center\"><FONT SIZE=+1><STRONG>Cost</STRONG></FONT>
<TD align=\"center\"><FONT SIZE=+1><STRONG>Tax</STRONG></FONT>
</TR>
<TR>
<TD align=\"center\"><INPUT TYPE=\"text\" NAME=\"cost\" VALUE=\"19.95\" SIZE=10>
<TD align=\"center\"><INPUT TYPE=\"text\" NAME=\"tax\" VALUE=\".06\" SIZE=10>
</TR>
</TABLE>
<BR>
<TABLE BORDER=1 WIDTH=600 CELLPADDING=3>
<TR>
<TD align=\"center\"><FONT SIZE=+1><STRONG>Unformatted Tax</STRONG></FONT>
<TD align=\"center\"><FONT SIZE=+1><STRONG>Formatted Tax</STRONG></FONT>
<TD align=\"center\"><FONT SIZE=+1><STRONG>TOTAL COST</STRONG></FONT>
</TR>
<TR>
<TD align=\"center\"><INPUT TYPE=\"text\" NAME=\"unformatted_tax\" SIZE=15>
<TD align=\"center\"><INPUT TYPE=\"text\" NAME=\"formatted_tax\" SIZE=15>
<TD align=\"center\"><INPUT TYPE=\"text\" NAME=\"total_cost\" SIZE=15>
</TR>
</TABLE>
<BR>
<TABLE BORDER=0 WIDTH=400 CELLPADDING=5>
<TR>
<TD align=\"center\"><INPUT TYPE=\"reset\" VALUE=\"RESET\" onClick=\"resetIt()\">
<TD align=\"center\"><INPUT TYPE=\"button\" VALUE=\"COMPUTE\" onclick=\"compute()\">
</TR>
</TABLE>
</CENTER>
