如何使用 AutoNumeric 计算总数

Question

I'm using http://autonumeric.org/ or https://github.com/autoNumeric/autoNumeric/blob/master/README.md

How to fix

• When I use JS function to calculate the sum total appear, but not as formatted AutoNumeric as I want it to be

• When mouse hover the calculated field, it disappears

 var taxRate = 0.10 function calculateAmount() { var elemsAmount = document.getElementsByName("tAmount") var total = 0 elemsAmount.forEach(function(e){ total += Number(e.value.replace(',','')) }) document.getElementById("total").value = total document.getElementById("tax").value = total*taxRate document.getElementById("finalTotal").value = total+total*taxRate } document.getElementById("tableBox").addEventListener("change",calculateAmount) new AutoNumeric.multiple('[contenteditable="true"]', 'dotDecimalCharCommaSeparator')

 <script src="https://unpkg.com/autonumeric" type="text/javascript"></script> <div id="tableBox"> <div name="tableRow"> <div class="col s3"> <div class="input-field"> <input type="text" name="tAmount" contenteditable="true"> <label>input</label> </div> </div> </div> <,-- name tableRow --> <div name="tableRow"> <div class="col s3"> <div class="input-field"> <input type="text" name="tAmount" contenteditable="true"> <label>input</label> </div> </div> </div> <.-- name tableRow --> </div> <,-- id tableBox --> Auto JS Calculation fields <div class="input-field"> <input type="text" id="total" contenteditable="true"> <label for="total">Total</label> </div> <div class="input-field"> <input type="text" id="tax" contenteditable="true"> <label for="tax">Tax</label> </div> <div class="input-field"> <input type="text" id="finalTotal" contenteditable="true"> <label for="finalTotal">Final Total</label> </div> Expect output #,###.##<br> Also the problem is when mouse hover on the Calculation field, it disappears

Thank you in advance

Answer 1

You should initialise and save the Autonumeric fields and use the Autonumeric API to update the value using .set() . You can do the same with the input fields and use .getNumber() to do your calculations.

As far as I know you can safely remove the contenteditable="true" attribute from <input/> elements — these are designed to be "editable".

 const taxRate = 0.10 const config = 'dotDecimalCharCommaSeparator' const totalInput = new AutoNumeric('#total', config) const taxInput = new AutoNumeric('#tax', config) const finalTotalInput = new AutoNumeric('#finalTotal', config) const elemsAmount = new AutoNumeric.multiple('[name="tAmount"]', config) const tableBox = document.getElementById('tableBox') function calculateAmount() { let total = 0 elemsAmount.forEach(function(e) { total += e.getNumber() }) totalInput.set(total) taxInput.set(total * taxRate) finalTotalInput.set(total + total * taxRate) } tableBox.addEventListener('change', calculateAmount)

 <script src="https://unpkg.com/autonumeric" type="text/javascript"></script> <div id="tableBox"> <div name="tableRow"> <div class="col s3"> <div class="input-field"> <input type="text" name="tAmount"> <label>input</label> </div> </div> </div> <div name="tableRow"> <div class="col s3"> <div class="input-field"> <input type="text" name="tAmount"> <label>input</label> </div> </div> </div> </div> Auto JS Calculation fields <div class="input-field"> <input type="text" id="total"> <label for="total">Total</label> </div> <div class="input-field"> <input type="text" id="tax"> <label for="tax">Tax</label> </div> <div class="input-field"> <input type="text" id="finalTotal"> <label for="finalTotal">Final Total</label> </div>