0

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
Paula
  • 1
  • 3
  • Does this answer your question? [How to print a number with commas as thousands separators in JavaScript](https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript) – imvain2 Sep 27 '22 at 16:34
  • No, that link doesn't answer my question. I'm hoping someone can look at my code and help me figure it out. I've tried adapting some of the code I've seen and it isn't working. I'm not familiar enough with javascript to understand how to adjust it to what I'm doing. I know enough to be dangerous, but this seems to be a bit more complicated for me. – Paula Sep 27 '22 at 16:45
  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Community Sep 27 '22 at 17:02

2 Answers2

0

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

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>
UmairFarooq
  • 1,269
  • 1
  • 3
  • 8
  • Perfect...thank you so much! That wasn't one of the things I tried and it was an easy fix. – Paula Sep 27 '22 at 18:28
  • please accept the answer if it solves your question – UmairFarooq Sep 27 '22 at 18:28
  • Do you know how I could update the code to allow users to input decimals in with their numbers? Right now I have a restriction to only allow whole numbers, but I have another calculator that's similar to this and I want people to be able to use decimals. – Paula Sep 27 '22 at 18:55
  • you can use decimals in javascript there is no limitation. – UmairFarooq Sep 27 '22 at 19:00
  • I know you can, but how can I adjust my code above to allow decimals in the ICCVal box? I tried to just delete the variable asking for whole numbers only. I deleted some of the other "if" statements, but it still didn't work. Right now I'm using a different calculation all together to get decimals to work, but I can't get the answer to show up in an input box and it doesn't show up with the comma in the thousands place. I was hoping to use the same code above and update it to what I need. I only need to multiple 2 variables in the calculator I'm trying to create. – Paula Sep 27 '22 at 19:30
  • Here's the code I'm currently using, but thinking I could possibly just update the initial code I have above. – Paula Sep 27 '22 at 19:31
  • I apologize...its my first time posting a question on this website. It ended up putting my code in the answer section above since I couldn't get it to look nice in the comment section. – Paula Sep 27 '22 at 19:42
  • No you just have to add decimal `. ` in your `var validNums = "0123456789."` i updated the answer aswell – UmairFarooq Sep 27 '22 at 20:53
  • I appreciate all of your help. I've been trying to change my second javascript calculator to work in the same format as the one we've been working on, but no luck. I laugh because it's a simple calculator (only multiplying 2 fields), but it's proving to be more difficult. Any ideas how I can transfer the second javascript code listed above for the ICCCalc into the same format or possibly just using the same code I already have that works and making sure the result has a comma in the answer? I tried using some of the tips provided in your answers for the comma on that set of code, but no luck. – Paula Sep 30 '22 at 16:35
  • make a codepen or jsfiddle – UmairFarooq Sep 30 '22 at 18:17
  • Thank you again very much! I was able to fix my code. – Paula Oct 05 '22 at 19:03
0

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>
Paula
  • 1
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 30 '22 at 23:08