Skip to main content
1 de 2
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Hay varias cosas que puede crear problemas con el JavaScript de la pregunta:

  • Se hace parseFloat de los campos incluso cuando están vacíos, lo que resulta en un NaN y un total no esperado. Lo ideal sería que si el campo está vacío y el valor va a ser NaN se utilizase 0 en su lugar.

    Para lograr esto añade un || 0 en la asignación:

      var TextBox1 = parseFloat(document.getElementById("txt1").value) || 0;
      var TextBox2 = parseFloat(document.getElementById("txt2").value) || 0;
      var TextBox3 = parseFloat(document.getElementById("txt3").value) || 0;
    
  • Se hace parseFloat sin preprocesar el campo, lo cual puede dar problemas con el formato que usas. Por ejemplo: imagina que tienes el valor 1234, que formateado se ve 1.234; cuando haces parseFloat de 1.234, el navegador considera que 1 es la parte entera y 234 son decimales, cuando realmente lo que quieres es todo como parte entera.

    Para solucionar esto, utiliza replace() de la misma manera que lo usas en la función de formato, de este modo se estará procesando correctamente como entero:

      var TextBox1 = parseFloat(document.getElementById("txt1").value.replace(/\./g, ''));
      var TextBox2 = parseFloat(document.getElementById("txt2").value.replace(/\./g, ''));
      var TextBox3 = parseFloat(document.getElementById("txt3").value.replace(/\./g, ''));
    
  • Cuando se cambia el valor del total, no se está formateando como los otros campos. Simplemente añade una llamada a la función format pasándole como valor el elemento con el total:

      format(document.getElementById("txt4"));
    

Combinando todos estos cambios, el código se vería como en esta demo:

function agregar_numero() {
  // quitas los puntos (para evitar problemas con los decimales) e inicializa a 0 si el campo esta vacio 
  var TextBox1 = parseFloat(document.getElementById("txt1").value.replace(/\./g, '')) || 0;
  var TextBox2 = parseFloat(document.getElementById("txt2").value.replace(/\./g, '')) || 0;
  var TextBox3 = parseFloat(document.getElementById("txt3").value.replace(/\./g, '')) || 0;
  var result = TextBox1 + TextBox2 + TextBox3;
  result.toFixed(2);
  document.getElementById("txt4").value = result;
  
  // formatea el resultado para que aparezca igual que los otros numeros
  format(document.getElementById("txt4"));
}

function format(input) {
  var num = input.value.replace(/\./g, '');
  if (!isNaN(num)) {
    num = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g, '$1.');
    num = num.split('').reverse().join('').replace(/^[\.]/, '');
    input.value = num;
  }
  else {
    alert('Solo se permiten numeros');
    input.value = input.value.replace(/[^\d\.]*/g, '');
  }
}
<input id="txt1" class="test" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"/>
<input id="txt2" class="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"/>
<input id="txt3" class="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"/>
<br />
Total<br />
<input id="txt4" class="TextBoxBorder" Width="70px" onkeyup="format(this)"/>

Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190