Estoy trabajando en una función. La función de JavaScript comienza a formatear el campo de texto de entrada tan pronto como un usuario comienza a escribir un número. Esto es bueno hasta ahora. Pero, cuando trato de tomar ese valor para realizar un cálculo simple, obtengo un error de Nan. Supongo que se debe a las comas. Entonces, ¿puedo eliminar estas comas de la entrada mientras la analizo en el cálculo? Y, una vez, se calcula el valor. Quiero mostrarlo en formato de comas como salida (Salario anual).
$('input.number').keyup(function(event) { // skip for arrow keys if (event.which >= 37 && event.which <= 40) return; // format number $(this).val(function(index, value) { return value .replace(/\D/g, "") .replace(/\B(?=(\d{3})+(?!\d))/g, ","); }); }); function calculateSalary() { var salary = document.getElementById("salary").value; var years = document.getElementById("years").value; var annumSalary = salary * years; document.getElementById("annumSalary").value = Math.round(annumSalary); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <label>Salary</label> <input class="form-control number" name="salary" id="salary" required/> <br> <label>Years</label> <input class="form-control" name="years" id="years" value="" type="number" required/> <br> <label>Annual Salary</label> <input class="form-control number" name="annumSalary" id="annumSalary" value="" type="number" readonly/> <br> <input type="submit" name="calculate" id="calculate" value="Calculate" onClick="calculateSalary()" />Para eliminar las comas de la cadena y convertir de cadena a número:
const str = '123,456.78'; const num = parseFloat(str.replace(/,/g, ''));Para volver a convertir a cadena con comas:
const formatted = new Intl.NumberFormat().format(num);Amigo, solo agrega parseInt() cuando obtengas el valor con document.getElementById('salary').value Y si crees que el usuario ingresará decimales, usa parseFloat.
Por lo general, parseInt () y parseFloat () convertirán la cadena en números que escapan (comunes) cosas como (, etc.)
PD: Además, si está usando jQuery, use $('#salary').value para que parezca simple.
$('input.number').keyup(function(event) { // skip for arrow keys if (event.which >= 37 && event.which <= 40) return; // format number $(this).val(function(index, value) { return value .replace(/\D/g, "") .replace(/\B(?=(\d{3})+(?!\d))/g, ","); }); }); function calculateSalary() { var salary = parseInt(document.getElementById("salary").value); var years = parseInt(document.getElementById("years").value); var annumSalary = salary * years; document.getElementById("annumSalary").value = Math.round(annumSalary); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <label>Salary</label> <input class="form-control number" name="salary" id="salary" required/> <br> <label>Years</label> <input class="form-control" name="years" id="years" value="" type="number" required/> <br> <label>Annual Salary</label> <input class="form-control number" name="annumSalary" id="annumSalary" value="" type="number" readonly/> <br> <input type="submit" name="calculate" id="calculate" value="Calculate" onClick="calculateSalary()" />