I would love if someone could help me with what i thought would be a simple application of AutoNumeric.js. I have the below code:

Fiddle link: /

<table id="shareInput" class="table_standard">
  <tr>
    <th>Name</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Growth</th>
    <th>Yield</th>

  </tr>
  <tr>
    <td><input type="text" class="input_field_large" id="shareName" value=""></td>
    <td><input type="text" class="input_field_medium_num" id="shareQty" value=""></td>
    <td><input type="text" class="input_field_medium_dollar" id="sharePrice" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareGrowth" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareYield" value=""></td>


  </tr>
  <tr>
    <td><input type="text" class="input_field_large" id="shareName" value=""></td>
    <td><input type="text" class="input_field_medium_num" id="shareQty" value=""></td>
    <td><input type="text" class="input_field_medium_dollar" id="sharePrice" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareGrowth" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareYield" value=""></td>

  </tr>
</table>

<script>
  window.onload = function() {


    const anElement = new AutoNumeric('.input_field_medium_pct', 0, {
      suffixText: "%"
    });

  };

</script>

The output I expect is for all the fields with the class input_field_medium_pct to have the desired AutoNumeric formatting, however it only formats the first field with that class. The documentation reads:

// The AutoNumeric constructor class can also accept a string as a css selector. Under the hood this use QuerySelector and limit itself to only the first element it finds. anElement = new AutoNumeric('.myCssClass > input'); anElement = new AutoNumeric('.myCssClass > input', { options });

Taken from:

I'm new to JS the and find the AutoNumeric documentation notes to be slightly confusing, has anyone run into this issue or able to shed some light on why this might be the case? Thanks in advance.

I would love if someone could help me with what i thought would be a simple application of AutoNumeric.js. I have the below code:

Fiddle link: https://jsfiddle/yu1s9nrv/8/

<table id="shareInput" class="table_standard">
  <tr>
    <th>Name</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Growth</th>
    <th>Yield</th>

  </tr>
  <tr>
    <td><input type="text" class="input_field_large" id="shareName" value=""></td>
    <td><input type="text" class="input_field_medium_num" id="shareQty" value=""></td>
    <td><input type="text" class="input_field_medium_dollar" id="sharePrice" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareGrowth" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareYield" value=""></td>


  </tr>
  <tr>
    <td><input type="text" class="input_field_large" id="shareName" value=""></td>
    <td><input type="text" class="input_field_medium_num" id="shareQty" value=""></td>
    <td><input type="text" class="input_field_medium_dollar" id="sharePrice" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareGrowth" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareYield" value=""></td>

  </tr>
</table>

<script>
  window.onload = function() {


    const anElement = new AutoNumeric('.input_field_medium_pct', 0, {
      suffixText: "%"
    });

  };

</script>

The output I expect is for all the fields with the class input_field_medium_pct to have the desired AutoNumeric formatting, however it only formats the first field with that class. The documentation reads:

// The AutoNumeric constructor class can also accept a string as a css selector. Under the hood this use QuerySelector and limit itself to only the first element it finds. anElement = new AutoNumeric('.myCssClass > input'); anElement = new AutoNumeric('.myCssClass > input', { options });

Taken from: https://github./autoNumeric/autoNumeric#initialize-one-autonumeric-object

I'm new to JS the and find the AutoNumeric documentation notes to be slightly confusing, has anyone run into this issue or able to shed some light on why this might be the case? Thanks in advance.

• javascript

1 Answer 1

You need to use Autonumeric.multiple to apply it to multiple elements as once.

 const anElement =  AutoNumeric.multiple('.input_field_medium_pct', 0, {
      suffixText: "%"
 });

Check the working jsfiddle

Also, check the documentation https://github./autoNumeric/autoNumeric#initialize-multiple-autonumeric-objects-at-once