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>

Please read How to Ask, and how to create a minimal reproducible example which demonstrates your error in a way that can be reproduced. Also, you may want to use the Stack Snippets feature (the button with <> in a page), which would create a snippet that runs in Stack Overflow. — Heretic Monkey
– Heretic Monkey, Commented Nov 15, 2016 at 15:48
you are calling a function and passing an argument that is not defined - where do you define inNum? — Haloor
– Haloor, Commented Nov 15, 2016 at 15:58

J. Titus · Accepted Answer · 2016-11-15 15:59:32Z

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>

Collectives™ on Stack Overflow

Uncaught reference error javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related