Commas in javascript calculator answer-CodePudding

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 >Enter the ICC valuation (round to the nearest thousand) Example: 342778.20 is 343000 </span></td>
      <td align="center" valign="bottom">
        <div >$<input type="text" name="ICCVal">
        </div>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <span ><input type="button" onClick="calcBuilding(ICCVal)"                                                                                       value="Calculate building permit fee"></span>
      </td>
    </tr>
    <tr>
      <td>
        <div >Building permit fee</div>
      </td>
      <td align="center" >$<input type="text" name="permitFee">
      </td>
    </tr>
    <tr>
      <td>
        <div >Plan review 25%</div>
      </td>
      <td >$<input type="text" name="planReview">
      </td>
    </tr>
    <tr>
      <td>
        <div >Subtotal</div>
      </td>
      <td >$<input type="text" name="Subtotal">
      </td>
    </tr>
    <tr>
      <td>
        <div >DBPR 1.5%</div>
      </td>
      <td >$<input type="text" name="DBPR">
      </td>
    </tr>
    <tr>
      <td>
        <div >DCA 1%</div>
      </td>
      <td >$<input type="text" name="DCA">
      </td>
    </tr>
    <tr>
      <td>
        <div >Total building permit fee</div>
      </td>
      <td >$<input type="text" name="totalFee">
      </td>
    </tr>
    <tr>
      <td colspan="2" >
        <p><strong>                                            <label>Does not include impact fees (if applicable), or Fire fees for commercial permits.</label>
                                              </strong></p>
        <p >Fees effective Jan. 1, 2021 with 75% reduction applied </p>
      </td>

    </tr>
    <tr>
      <td>
        <div >Subtotal</div>
      </td>
      <td >$<input type="text" name="Subtotaldisc">
      </td>
    </tr>
    <tr>
      <td>
        <div >DBPR 1.5%</div>
      </td>
      <td >$<input type="text" name="DBPRdisc">
      </td>
    </tr>
    <tr>
      <td>
        <div >DCA 1%</div>
      </td>
      <td >$<input type="text" name="DCAdisc">
      </td>
    </tr>
    <tr>
      <td>
        <div >Total building permit fee</div>
      </td>
      <td >$<input type="text" `enter code here`name="totalFeedisc">
      </td>
    </tr>
    <tr>
      <td colspan="2" >
        <p><input type="button" onClick="clear_buildingCalc()" value="Clear calculation"></p>
  </table>
</form>

CodePudding user response：

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>

CodePudding user response：

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 >Enter the ICC valuation (round to the nearest thousand) Example: 342778.20 is 343000 </span></td>
      <td align="center" valign="bottom">
        <div >$<input type="text" name="ICCVal">
        </div>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <span ><input type="button" onClick="calcBuilding(ICCVal)"                                                                                       value="Calculate building permit fee"></span>
      </td>
    </tr>
    <tr>
      <td>
        <div >Building permit fee</div>
      </td>
      <td align="center" >$<input type="text" name="permitFee">
      </td>
    </tr>
    <tr>
      <td>
        <div >Plan review 25%</div>
      </td>
      <td >$<input type="text" name="planReview">
      </td>
    </tr>
    <tr>
      <td>
        <div >Subtotal</div>
      </td>
      <td >$<input type="text" name="Subtotal">
      </td>
    </tr>
    <tr>
      <td>
        <div >DBPR 1.5%</div>
      </td>
      <td >$<input type="text" name="DBPR">
      </td>
    </tr>
    <tr>
      <td>
        <div >DCA 1%</div>
      </td>
      <td >$<input type="text" name="DCA">
      </td>
    </tr>
    <tr>
      <td>
        <div >Total building permit fee</div>
      </td>
      <td >$<input type="text" name="totalFee">
      </td>
    </tr>
    <tr>
      <td colspan="2" >
        <p><strong>                                            <label>Does not include impact fees (if applicable), or Fire fees for commercial permits.</label>
                                              </strong></p>
        <p >Fees effective Jan. 1, 2021 with 75% reduction applied </p>
      </td>

    </tr>
    <tr>
      <td>
        <div >Subtotal</div>
      </td>
      <td >$<input type="text" name="Subtotaldisc">
      </td>
    </tr>
    <tr>
      <td>
        <div >DBPR 1.5%</div>
      </td>
      <td >$<input type="text" name="DBPRdisc">
      </td>
    </tr>
    <tr>
      <td>
        <div >DCA 1%</div>
      </td>
      <td >$<input type="text" name="DCAdisc">
      </td>
    </tr>
    <tr>
      <td>
        <div >Total building permit fee</div>
      </td>
      <td >$<input type="text" `enter code here` name="totalFeedisc">
      </td>
    </tr>
    <tr>
      <td colspan="2" >
        <p><input type="button" onClick="clear_buildingCalc()" value="Clear calculation"></p>
  </table>
</form>