Javascript won't calculate

Question

Can anyone point me in the right direction as to why my calculate button will not calculate. It doesn't even throw any of the error messages up to the screen, but my clear button does work. It's probably something small, but I cannot figure it out for the life of me -_-.

 var $ = function(id) { return document.getElementById(id); } var virusRemovalPrice = 20.00; var websiteMakingCost = 75.00; var computerServicingCost = 100.00; var calculateTotal = function() { var virusRemoval = parseFloat($("virusRemoval").value); var websiteMaking = parseFloat($("websiteMaking").value); var computerOptimizationAndSetUp = parseFloat($("computerOptimizationAndSetUp").value); var totalCost = parseFloat(($("totalCost").value)); if (isNaN(virusRemoval) || virusRemoval < 0) { alert("Value must be numeric and at least zero. "); $("virusRemoval").focus() } else if (isNaN(websiteMaking) || websiteMaking < 0) { alert("Value must be numeric and at least zero. "); $("websiteMaking").focus() } else if (isNaN(computerOptimizationAndSetUp) || computerOptimizationAndSetUp < 0) { alert("Value must be numeric and at least zero. "); $("computerOptimizationAndSetUp").focus() } else { do { var ii = 0; var cost = ((virusRemovalPrice * virusRemoval) + (websiteMakingCost * websiteMaking) + (computerServicingCost * computerOptimizationAndSetUp)); $("cost").value = cost.toFixed(2); //total cost final if (cost > 1) { alert("Your total is " + cost + " hope to see you soon!"); } } while (ii = 0) } }; var clearValues = function() { var virusRemoval = parseFloat($("virusRemoval").value = ""); var websiteMaking = parseFloat($("websiteMaking").value = ""); var computerOptimizationAndSetUp = parseFloat($("computerOptimizationAndSetUp").value = ""); var totalCost = parseFloat($("totalCost").value = ""); } 

 <form class="anotheremoved"> <h2>Total Cost</h2> <label for="virusRemoval">Virus Removal:</label> <br /> <input type="text" id="virusRemoval"> <br /> <label for="websiteMaking">Website Design:</label> <br /> <input type="text" id="websiteMaking"> <br /> <label for="computerOptimizationAndSetUp">Computer Setup:</label> <br /> <input type="text" id="computerOptimizationAndSetUp"> <br /> <br /> <label for="totalCost">Your Total Cost is:</label> <input type="text" id="TotalCost" disabled> <br /> <input class="removed" type="button" id="calculateTotal" value="Calculate " onblur="calculateTotal()"> <input class="removed" type="button" id="clear" value="Clear" onclick="clearValues()"> </form> 

The reason why the loop is in there is because we were required to have a loop and I couldn't find a good reason to have one, so I used one that would always be true to get it out of the way lol. Probably will throw an infinate loop at me or something, but I'll figure that out later, I'm just trying to get the dang on thing to do something here haha. I've tried to rewrite this 2 other times and still get to the same spot, so I realize it's probably something small, and I am new to Javascript. Thank you.

Answer 1

The problem is that you have id="calculateTotal" in the input button. Element IDs are automatically turned into top-level variables, so this is replacing the function named calculateTotal . Simply give the function a different name from the button's ID.

You also have a typo. The ID of the Total Cost field is TotalCost , but the code uses $('totalCost') and $('cost').

It's also better to do the calculation in onclick , not onblur . Otherwise you have to click on the button and then click on something else to see the result.

In the clearValues function, there's no need to assign variables and call parseFloat . Just set each of the values to the empty string. You could also just use <input type="reset"> , that resets all the inputs in the form to their initial values automatically.

 var $ = function(id) { return document.getElementById(id); } var virusRemovalPrice = 20.00; var websiteMakingCost = 75.00; var computerServicingCost = 100.00; var calculateTotal = function() { var virusRemoval = parseFloat($("virusRemoval").value); var websiteMaking = parseFloat($("websiteMaking").value); var computerOptimizationAndSetUp = parseFloat($("computerOptimizationAndSetUp").value); var totalCost = parseFloat(($("TotalCost").value)); if (isNaN(virusRemoval) || virusRemoval < 0) { alert("Value must be numeric and at least zero. "); $("virusRemoval").focus() } else if (isNaN(websiteMaking) || websiteMaking < 0) { alert("Value must be numeric and at least zero. "); $("websiteMaking").focus() } else if (isNaN(computerOptimizationAndSetUp) || computerOptimizationAndSetUp < 0) { alert("Value must be numeric and at least zero. "); $("computerOptimizationAndSetUp").focus() } else { do { var ii = 0; var cost = ((virusRemovalPrice * virusRemoval) + (websiteMakingCost * websiteMaking) + (computerServicingCost * computerOptimizationAndSetUp)); $("TotalCost").value = cost.toFixed(2); //total cost final if (cost > 1) { alert("Your total is " + cost + " hope to see you soon!"); } } while (ii = 0) } }; var clearValues = function() { $("virusRemoval").value = ""; $("websiteMaking").value = ""; $("computerOptimizationAndSetUp").value = ""; $("TotalCost").value = ""; } 

 <form class="anotheremoved"> <h2>Total Cost</h2> <label for="virusRemoval">Virus Removal:</label> <br /> <input type="text" id="virusRemoval"> <br /> <label for="websiteMaking">Website Design:</label> <br /> <input type="text" id="websiteMaking"> <br /> <label for="computerOptimizationAndSetUp">Computer Setup:</label> <br /> <input type="text" id="computerOptimizationAndSetUp"> <br /> <br /> <label for="totalCost">Your Total Cost is:</label> <input type="text" id="TotalCost" disabled> <br /> <input class="removed" type="button" id="calculateTotalButton" value="Calculate " onclick="calculateTotal()"> <input class="removed" type="button" id="clear" value="Clear" onclick="clearValues()"> </form>