Question: Below is the current problem I am working on for a JavaScript class (as well as the HTML and JavaScript) - to me it looks
Below is the current problem I am working on for a JavaScript class (as well as the HTML and JavaScript) - to me it looks like all my code looks right but I can't get the application to work at all (hence something is wrong - my if/else or calculations?) Can anyone tell me where I am going wrong in my JavaScript?
1. In the JavaScript file, write the code for calculating and displaying the salestax and invoice total when the user clicks on the Calculate button.
2. If you havent already done so, add data validation to this application. Thesubtotal entry should be a valid, positive number thats less than 10,000. Thetax rate should be a valid, positive number thats less than 12. The errormessages should be displayed in the span elements to the right of the textboxes, and the error messages should be:
"Must be a positive number less than $10,000" and "Must be a positive number less than 12.
3. Add JavaScript code that moves the cursor to the Subtotal field when the application starts and when the user clicks on the Calculate button.
4. Add the JavaScript event handler for the click event of the Clear button. This should clear all text boxes, restore the starting messages, and move the cursor to the Subtotal field.
5. Add JavaScript event handlers for the click events of the Subtotal and Tax Rate text boxes. Each handler should clear the data from the text box.
HTML
Sales Tax Calculator
Enter Subtotal and Tax Rate and click "Calculate".
Enter sales tax rate (99.9)
JavaScript
var $ = function (id) { return document.getElementById(id); } var calculateClick = function () { var subtotal = parseFloat( $("subtotal").value ); var taxRate = parseFloat( $("tax_rate").value ); var isValid = true; $("salesTax").value = ""; $("total").value = ""; //error messages - data validation if (isNaN(subtotal) || subtotal <= 0 || subtotal > 10000) { document.getElementById("subtotal_message").innerHTML = "Must be a positive number less than $10,000"; isValid = false; } else (isNaN(taxRate) || taxRate <= 0 || taxRate > 12) { document.getElementById("tax_rate_message").innerHTML = "Must be a positive number less than 12"; isValid = false; } //calculate sales tax and total if valid entries if (isValid) { var salesTax = subtotal * (taxRate / 100); salesTax = parseFloat(salesTax.toFixed(2)); var total = subtotal + salesTax; $("salesTax").value = salesTax; $("total").value = total.toFixed(2); } }
//clear text boxes var clearClick = function () { $("subtotal").value = ""; $("taxRate").value = ""; $("salesTax").value = ""; $("total").value = ""; //restore starting messages $("subtotal_message").innerHTML = "Enter order subtotal"; $("tax_rate_message").innerHTML = "Enter sales tax rate (99.9)"; //set focus to subtotal box $("subtotal").focus(); }
var clearSubtotal = function () { $("subtotal").value = ""; } var clearTax = function() { $("taxRate").value = ""; }
window.onload = function () { $("calculate").onclick = calculateClick; $("clear").onclick = clearClick; $("subtotal").ondblclick = clearSubtotal; // double click to clear the subtotal box $("taxRate").ondblclick = clearTax; // double click to clear the tax rate box $("subtotal").focus(); // sets the focus to the subtotal box
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
