Commas in javascript calculator answer

Question

I'm trying to add commas to my output answers in JavaScript calculator. I updated an old calculator that was used on a previous website that I maintained and it's working, but I can't get the answers to show up with the comma. I was excited I figured out how to round to 2 decimal places. I've tried a few different things that I feel like might have worked, but I was missing something in how to change the code since my code is set up differently than the examples I saw.

 function clear_buildingCalc() { document.buildingCalc.ICCVal.value = ""; document.buildingCalc.permitFee.value = ""; document.buildingCalc.planReview.value = ""; document.buildingCalc.Subtotal.value = ""; document.buildingCalc.DBPR.value = ""; document.buildingCalc.DCA.value = ""; document.buildingCalc.totalFee.value = ""; document.buildingCalc.Subtotaldisc.value = ""; document.buildingCalc.DBPRdisc.value = ""; document.buildingCalc.DCAdisc.value = ""; document.buildingCalc.totalFeedisc.value = ""; } function calcBuilding(ICCVal) { var validNums = "0123456789" var flag = "yes"; var tempChar; for (var c = 0; c < ICCVal.value.length; c++) { tempChar = "" + ICCVal.value.substring(c, c + 1); if (validNums.indexOf(tempChar) == "-1") { flag = "no"; } } if (flag == "no") { alert("Please enter only whole numbers."); } if (flag == "yes") { if (document.buildingCalc.ICCVal.value == "") { alert("Please enter the ICC valuation."); } else { var addlFee = 5.26; var baseFee = 968.50; var roundICC = Math.round(ICCVal.value - 100000) / 1000; var permitFee = Math.round((addlFee * roundICC) * 1000) / 1000; var permitFee2 = Math.round((permitFee + baseFee) * 100) / 100; var planReviewRate = 0.25; var planReview = Math.round((planReviewRate * permitFee2) * 1000) / 1000; var Subtotal = Math.round((permitFee2 + planReview) * 100) / 100; var DBPRRate = 0.015; var DBPR = Math.round((DBPRRate * Subtotal) * 100) / 100; var DCARate = 0.01; var DCA = Math.round((DCARate * Subtotal) * 100) / 100; var totalFee = Math.round((Subtotal + DBPR + DCA) * 100) / 100; var Subtotaldisc = Math.round((Subtotal * 0.25) * 100) / 100; var DBPRRatedisc = 0.015; var DBPRdisc = Math.round((DBPRRatedisc * Subtotaldisc) * 100) / 100; var DCARatedisc = 0.01; var DCAdisc = Math.round((DCARatedisc * Subtotaldisc) * 100) / 100; var totalFeedisc = Math.round((Subtotaldisc + DBPRdisc + DCAdisc) * 100) / 100; document.buildingCalc.permitFee.value = permitFee2; document.buildingCalc.planReview.value = planReview; document.buildingCalc.Subtotal.value = Subtotal; document.buildingCalc.DBPR.value = DBPR; document.buildingCalc.DCA.value = DCA; document.buildingCalc.totalFee.value = totalFee; document.buildingCalc.Subtotaldisc.value = Subtotaldisc; document.buildingCalc.DBPRdisc.value = DBPRdisc; document.buildingCalc.DCAdisc.value = DCAdisc; document.buildingCalc.totalFeedisc.value = totalFeedisc; } } }

 <form name="buildingCalc"> <table border="0" cellpadding="5" bordercolor="#000000"> <tr> <td width="350" valign="bottom"><span class="body">Enter the ICC valuation (round to the nearest thousand) Example: 342778.20 is 343000 </span></td> <td align="center" valign="bottom"> <div class="body">$<input type="text" name="ICCVal"> </div> </td> </tr> <tr> <td colspan="2"> <span class="body"><input type="button" onClick="calcBuilding(ICCVal)" value="Calculate building permit fee"></span> </td> </tr> <tr> <td> <div class="body">Building permit fee</div> </td> <td align="center" class="body">$<input type="text" name="permitFee"> </td> </tr> <tr> <td> <div class="body">Plan review 25%</div> </td> <td class="body">$<input type="text" name="planReview"> </td> </tr> <tr> <td> <div class="body">Subtotal</div> </td> <td class="body">$<input type="text" name="Subtotal"> </td> </tr> <tr> <td> <div class="body">DBPR 1.5%</div> </td> <td class="body">$<input type="text" name="DBPR"> </td> </tr> <tr> <td> <div class="body">DCA 1%</div> </td> <td class="body">$<input type="text" name="DCA"> </td> </tr> <tr> <td> <div class="body">Total building permit fee</div> </td> <td class="body">$<input type="text" name="totalFee"> </td> </tr> <tr> <td colspan="2" class="body"> <p><strong> <label>Does not include impact fees (if applicable), or Fire fees for commercial permits.</label> </strong></p> <p class="subpagesubheader">Fees effective Jan. 1, 2021 with 75% reduction applied </p> </td> </tr> <tr> <td> <div class="body">Subtotal</div> </td> <td class="body">$<input type="text" name="Subtotaldisc"> </td> </tr> <tr> <td> <div class="body">DBPR 1.5%</div> </td> <td class="body">$<input type="text" name="DBPRdisc"> </td> </tr> <tr> <td> <div class="body">DCA 1%</div> </td> <td class="body">$<input type="text" name="DCAdisc"> </td> </tr> <tr> <td> <div class="body">Total building permit fee</div> </td> <td class="body">$<input type="text" `enter code here`name="totalFeedisc"> </td> </tr> <tr> <td colspan="2" class="body"> <p><input type="button" onClick="clear_buildingCalc()" value="Clear calculation"></p> </table> </form>

Answer 1

You can use .toLocaleString(); when assigning the values. For eg

document.buildingCalc.totalFeedisc.value = totalFeedisc.toLocaleString()

If you want decimal to work include . inside var validNums = "0123456789." That way you can keep the functionality & change anytime you want

 function clear_buildingCalc() { document.buildingCalc.ICCVal.value = ""; document.buildingCalc.permitFee.value = ""; document.buildingCalc.planReview.value = ""; document.buildingCalc.Subtotal.value = ""; document.buildingCalc.DBPR.value = ""; document.buildingCalc.DCA.value = ""; document.buildingCalc.totalFee.value = ""; document.buildingCalc.Subtotaldisc.value = ""; document.buildingCalc.DBPRdisc.value = ""; document.buildingCalc.DCAdisc.value = ""; document.buildingCalc.totalFeedisc.value = ""; } function calcBuilding(ICCVal) { var validNums = "0123456789." var flag = "yes"; var tempChar; for (var c = 0; c < ICCVal.value.length; c++) { tempChar = "" + ICCVal.value.substring(c, c + 1); if (validNums.indexOf(tempChar) == "-1") { flag = "no"; } } if (flag == "no") { alert("Please enter only whole numbers."); } if (flag == "yes") { if (document.buildingCalc.ICCVal.value == "") { alert("Please enter the ICC valuation."); } else { var addlFee = 5.26; var baseFee = 968.50; var roundICC = Math.round(ICCVal.value - 100000) / 1000; var permitFee = Math.round((addlFee * roundICC) * 1000) / 1000; var permitFee2 = Math.round((permitFee + baseFee) * 100) / 100; var planReviewRate = 0.25; var planReview = Math.round((planReviewRate * permitFee2) * 1000) / 1000; var Subtotal = Math.round((permitFee2 + planReview) * 100) / 100; var DBPRRate = 0.015; var DBPR = Math.round((DBPRRate * Subtotal) * 100) / 100; var DCARate = 0.01; var DCA = Math.round((DCARate * Subtotal) * 100) / 100; var totalFee = Math.round((Subtotal + DBPR + DCA) * 100) / 100; var Subtotaldisc = Math.round((Subtotal * 0.25) * 100) / 100; var DBPRRatedisc = 0.015; var DBPRdisc = Math.round((DBPRRatedisc * Subtotaldisc) * 100) / 100; var DCARatedisc = 0.01; var DCAdisc = Math.round((DCARatedisc * Subtotaldisc) * 100) / 100; var totalFeedisc = Math.round((Subtotaldisc + DBPRdisc + DCAdisc) * 100) / 100; document.buildingCalc.permitFee.value = permitFee2.toLocaleString(); document.buildingCalc.planReview.value = planReview.toLocaleString(); document.buildingCalc.Subtotal.value = Subtotal.toLocaleString(); document.buildingCalc.DBPR.value = DBPR.toLocaleString(); document.buildingCalc.DCA.value = DCA.toLocaleString(); document.buildingCalc.totalFee.value = totalFee.toLocaleString(); document.buildingCalc.Subtotaldisc.value = Subtotaldisc.toLocaleString(); document.buildingCalc.DBPRdisc.value = DBPRdisc.toLocaleString(); document.buildingCalc.DCAdisc.value = DCAdisc.toLocaleString(); document.buildingCalc.totalFeedisc.value = totalFeedisc.toLocaleString(); } } }

 <form name="buildingCalc"> <table border="0" cellpadding="5" bordercolor="#000000"> <tr> <td width="350" valign="bottom"><span class="body">Enter the ICC valuation (round to the nearest thousand) Example: 342778.20 is 343000 </span></td> <td align="center" valign="bottom"> <div class="body">$<input type="text" name="ICCVal"> </div> </td> </tr> <tr> <td colspan="2"> <span class="body"><input type="button" onClick="calcBuilding(ICCVal)" value="Calculate building permit fee"></span> </td> </tr> <tr> <td> <div class="body">Building permit fee</div> </td> <td align="center" class="body">$<input type="text" name="permitFee"> </td> </tr> <tr> <td> <div class="body">Plan review 25%</div> </td> <td class="body">$<input type="text" name="planReview"> </td> </tr> <tr> <td> <div class="body">Subtotal</div> </td> <td class="body">$<input type="text" name="Subtotal"> </td> </tr> <tr> <td> <div class="body">DBPR 1.5%</div> </td> <td class="body">$<input type="text" name="DBPR"> </td> </tr> <tr> <td> <div class="body">DCA 1%</div> </td> <td class="body">$<input type="text" name="DCA"> </td> </tr> <tr> <td> <div class="body">Total building permit fee</div> </td> <td class="body">$<input type="text" name="totalFee"> </td> </tr> <tr> <td colspan="2" class="body"> <p><strong> <label>Does not include impact fees (if applicable), or Fire fees for commercial permits.</label> </strong></p> <p class="subpagesubheader">Fees effective Jan. 1, 2021 with 75% reduction applied </p> </td> </tr> <tr> <td> <div class="body">Subtotal</div> </td> <td class="body">$<input type="text" name="Subtotaldisc"> </td> </tr> <tr> <td> <div class="body">DBPR 1.5%</div> </td> <td class="body">$<input type="text" name="DBPRdisc"> </td> </tr> <tr> <td> <div class="body">DCA 1%</div> </td> <td class="body">$<input type="text" name="DCAdisc"> </td> </tr> <tr> <td> <div class="body">Total building permit fee</div> </td> <td class="body">$<input type="text" `enter code here` name="totalFeedisc"> </td> </tr> <tr> <td colspan="2" class="body"> <p><input type="button" onClick="clear_buildingCalc()" value="Clear calculation"></p> </table> </form>

Answer 2

Javascript

<script language="JavaScript">
function clear_ICCCalc()
{
document.ICCCalc.OccupancyConst.value = "";
document.ICCCalc.SquareFeet.value = "";
document.getElementById("result").innerHTML = "";
}   

function multiplyBy()
{
num1 = document.getElementById("OccupancyConst").value;
num2 = document.getElementById("SquareFeet").value;
document.getElementById("result").innerHTML = num1 * num2;
}
</script>