Uncaught reference error javascript

Question

I'm working on a form that takes values from the user and dropdown arrays to calculate a value and display it in an empty form field. This also requires a currency format function to show the value in USD. I can get everything to work just fine except the currency format.

The way the code is now shows uncaught reference error. If I take off the inNum function name out of the onClick event, the first part of the if statement works, displaying "Invalid Amount."

Any help with this conundrum is much appreciated! Thank You!

function getShipping(inNum) {
  var product = document.getElementById("selected").value;
  var quantity = document.getElementById("textfield2").value;

  var salesT = product * quantity;

  var taxRate = document.getElementById("state").value;

  var taxTotal = taxRate * salesT;

  var shipping = document.getElementById("shipping").value;

  var totalBill = parseFloat(taxTotal) + parseFloat(salesT) + parseFloat(shipping);

  if (isNaN(inNum)) {
    //alert("result of isNaN" );   //The input amount is a non numeric string. It is or contains letters and/or spaces
    document.getElementById("total").value = "Invalid amount"
  } else {
    inNum = parseFloat(totalBill.inNum); //Convert input value into a floating point number.  toFixed() requires a number value to work with
    document.getElementById("total").value = parseFloat(totalBill) + inNum.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
  }

  //document.getElementById("total").value = "$" + totalBill;
}

<h1 align=center>Calculate Your Order</h1>
<form name="frmProd" method="post" action="">
  <table border="1">
    <tr>
      <td width="53%">Select Product:</td>
      <td width="47%">
        <select size="1" name="product" id="selected">
          <option value="0" selected>Please Select a Product</option>
          <option value="1.99">Book</option>
          <option value=".99">Pen</option>
          <option value=".25">Pencil</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Quantity:</td>
      <td>
        <input name="textfield2" type="text" id="textfield2" size="5">
      </td>
    </tr>
    <tr>
      <td>Shipping State (Tax Purposes):</td>
      <td>
        <select size="1" name=state id="state">
          <option selected value="0.06">Iowa</option>
          <option value="0.085">Illinois</option>
          <option value="0.7">Indiana</option>
          <option value="0.0">Other</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Delivery Method:</td>
      <td>
        <select size="1" name="shipping" id="shipping">
          <option value="9.50" selected>Standard UPS - 3 Days</option>
          <option value="6.50">US Mail - 5 Days</option>
          <option value="19.95">Overnight - 1 Day</option>
          <option value="0.0">Pickup</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Your Total is:</td>
      <td>
        <input name="total" value=$ 0.00 id="total">
      </td>
    </tr>
  </table>
  <p>
    <input type="button" value="Calculate My Order Now!" name="submit" onClick="getShipping(inNum)">
    <input type="reset" name="Reset" id="button" value="Reset Form">
  </p>
</form>

Answer 1

inNum = parseFloat(totalBill.inNum);

totalBill is a number at this point, so it does not have a reference to inNum.

I'm not sure what you were trying to do with inNum, but getting rid of it altogether is probably the solution you're looking for:

function getShipping() {
  var product = document.getElementById("selected").value;
  var quantity = document.getElementById("textfield2").value;

  var salesT = product * quantity;

  var taxRate = document.getElementById("state").value;

  var taxTotal = taxRate * salesT;

  var shipping = document.getElementById("shipping").value;

  var totalBill = parseFloat(taxTotal) + parseFloat(salesT) + parseFloat(shipping);

  if (isNaN(totalBill)) {
    //alert("result of isNaN" );   //The input amount is a non numeric string. It is or contains letters and/or spaces
    document.getElementById("total").value = "Invalid amount"
  } else {
    document.getElementById("total").value = parseFloat(totalBill).toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
  }

  //document.getElementById("total").value = "$" + totalBill;
}

<h1 align=center>Calculate Your Order</h1>
<form name="frmProd" method="post" action="">
  <table border="1">
    <tr>
      <td width="53%">Select Product:</td>
      <td width="47%">
        <select size="1" name="product" id="selected">
          <option value="0" selected>Please Select a Product</option>
          <option value="1.99">Book</option>
          <option value=".99">Pen</option>
          <option value=".25">Pencil</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Quantity:</td>
      <td>
        <input name="textfield2" type="text" id="textfield2" size="5">
      </td>
    </tr>
    <tr>
      <td>Shipping State (Tax Purposes):</td>
      <td>
        <select size="1" name=state id="state">
          <option selected value="0.06">Iowa</option>
          <option value="0.085">Illinois</option>
          <option value="0.7">Indiana</option>
          <option value="0.0">Other</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Delivery Method:</td>
      <td>
        <select size="1" name="shipping" id="shipping">
          <option value="9.50" selected>Standard UPS - 3 Days</option>
          <option value="6.50">US Mail - 5 Days</option>
          <option value="19.95">Overnight - 1 Day</option>
          <option value="0.0">Pickup</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Your Total is:</td>
      <td>
        <input name="total" value=$ 0.00 id="total">
      </td>
    </tr>
  </table>
  <p>
    <input type="button" value="Calculate My Order Now!" name="submit" onClick="getShipping()">
    <input type="reset" name="Reset" id="button" value="Reset Form">
  </p>
</form>