Почему сумма общих сумм только считает целую часть и опускает десятичных?

У меня есть какие-то проблемы с моим кодом javascript в момент складывания стоимости нескольких textbox. Только сложи целую стоимость.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DEMO</title>    
</head>

<body>
    <form runat="server">
        <asp:TextBox ID="txt1" runat="server" Class="test" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
        <asp:TextBox ID="txt2" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
        <asp:TextBox ID="txt3" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
        <br />
        Total<br />
        <asp:TextBox ID="txt4" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="format(this)"></asp:TextBox>


    </form>
</body>

<script>
    function agregar_numero() {

        var TextBox1 = parseFloat(document.getElementById("txt1").value);
        var TextBox2 = parseFloat(document.getElementById("txt2").value);
        var TextBox3 = parseFloat(document.getElementById("txt3").value);
        var result = TextBox1 + TextBox2 + TextBox3;
        result.toFixed(2);
        document.getElementById("txt4").value = result;
    }
</script>

<script>
    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, '');
        }
    }
</script>
</html>
2
задан 24.03.2016, 08:23
1 ответ

Есть несколько вещей, которые он может создавать проблемы с языком сценариев JavaScript вопроса:

  • Он делается parseFloat полей даже, когда они пустые, что заканчивается NaN и не ожидаемым общим количеством. Идеальное состояло бы в том, чтобы, если поле пустое и стоимостью будет являться НЭН использовался 0 в Вашем месте.

    Чтобы этого добиваться добавляет один || 0 в ассигновании:

    var TextBox1 = parseFloat(document.getElementById("txt1").value) || 0;
    var TextBox2 = parseFloat(document.getElementById("txt2").value) || 0;
    var TextBox3 = parseFloat(document.getElementById("txt3").value) || 0;
    
  • Он делается parseFloat не предобрабатывая поля, что может давать проблемы с форматом, который ты используешь. Например: представь, что у тебя есть стоимость 1234, что форматирование видит 1.234; когда ты делаешь parseFloat 1.234, браузер считает, что 1 - целая и часть 234, они десятичные, когда действительно то, что ты хочешь, является совсем целой частью.

    Чтобы это решать, используй replace() таким же образом как ты это используешь в функции формата, таким образом оно будет обработано правильно как целое число:

    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, ''));
    
  • Когда меняется стоимость общего количества, оно не форматируется как другие поля. Просто добавь призыв к функции format перемещая его как стоимость элемент с общим количеством:

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

Сочетая все эти изменения, код был бы виден как в этом 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)"/>

Обновление: Они спросили у меня, как он стал бы немного сходным, но вместо используя точки, используя запятые для расставания тысяч и оставляя точку для десятичных. Например, чтобы допускать такие числа как 123,123,123.12

Изменения, чтобы этого добиваться, - простые:

  • Обновлять все замены и регулярные выражения. в, (есть достаточно).
  • В функции, которая форматирует числа:
    • Отделять целую часть и десятичных
    • Делать все операции форматирования с целой частью
    • Вновь добавлять десятичную часть после того, как форматировать целую

Конечный результат остался бы таким:

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;
  //console.log(TextBox1 + "__" + TextBox2 + "__" + TextBox3 + "__" + result);
  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, '');
  var decimales = "";
  if (num.indexOf(".") >= 0) { 
    decimales = "." + num.split(".")[1].substring(0,2); // sólo nos quedamos con los dos primeros decimales
    num = Math.floor(num); // redondeamos hacia abajo para quedarnos con la parte entera
  }
  if (!isNaN(num)) {
    num = num.toString().split('').reverse().join('').replace(/(?=\d*\,?)(\d{3})/g, '$1,');
    // añadir los decimales al final!
    num = num.split('').reverse().join('').replace(/^[\,]/, '') + decimales;
    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)"/>
2
ответ дан 24.11.2019, 14:42
  • 1
    Спасибо за давание тебе беспокойства писать комментарии он подал меня многого и снова спасибо за твое время! – IronHeart 23.03.2016, 21:25

Теги

Похожие вопросы