1

¿De qué manera puedo multiplicar y a la vez sumar esos totales, donde mi input tiene como valor value="2.500.000,00"?.

Quiero multiplicar y sumar sin tener que quitar los puntos y decimales, ya que si se los quito mi código funciona perfectamente, pero quiero hacerlos con los puntos y decimales.

Estoy tomando el valor de los input por medio de los tr.

Anexo Fragmento de mi código

<!DOCTYPE html>
<html>
<body>
    <table>
        <thead>
            <tr>
                <th>Precio</th>
                <th>Cantidad</th>
                <th>Precio Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>    <input type="text" class="input" value="2.500.000,00">  </td>
                <td>    <input type="number" class="input">                     </td>
                <td>    <input type="text" class="total"  disabled>             </td>
            </tr>
            <tr>
                <td>    <input type="text" class="input" value="4.500.000,00" >  </td>
                <td>    <input type="number" class="input">                      </td>
                <td>    <input type="text" class="total"  disabled>              </td>
            </tr>
            <tr>
                <td>TOTAL</td>
                <td>    <input type="text" class="totales" value="0" disabled>   </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
 
<script>
var input=document.querySelectorAll(".input");
input.forEach(function(e) {
    e.addEventListener("click",multiplica);
    e.addEventListener("keyup",multiplica);
});
function multiplica() {
    var tr=this.closest("tr");
    var total=1;
    var inputs=tr.querySelectorAll(".input");
    inputs.forEach(function(e) {
        total*=e.value;
    });
    tr.querySelector(".total").value=total.toFixed(2);
    calcularTotal(this.closest("table"));
}
function calcularTotal(e) {
    var total=0;
    var totales=e.querySelectorAll(".total");
    totales.forEach(function(e) {
        total+=parseFloat(e.value);
    });
    e.getElementsByClassName("totales")[0].value=total.toFixed(2);
}
</script>

13
  • Los números se trabajan como eso... números. Si quieres agregarle los puntos y eso, se hace después de obtener el resultado.
    – Excorpion
    el 9 jun. 2021 a las 15:06
  • Lo que dice Excorpion es lo que he intentado decirte en la otra pregunta el 9 jun. 2021 a las 15:11
  • Entiendo perfectamente lo que me dicen. Pero entonces no existe una manera?. @JeanGotopo quise separar mi problema anterior para luego construir uno solo el 9 jun. 2021 a las 15:15
  • 1
    Si existe una manera... trabaja el 2500000 como un 2500000... cuando ya hayas hecho los calculos, toma el resultado y dale el formato visual que quieras.
    – Excorpion
    el 9 jun. 2021 a las 15:16
  • 1
    LO QUE QUIERES ES DARLE UN FORMATO !!! literalmente, eso ES darle un formato.
    – Excorpion
    el 9 jun. 2021 a las 15:21

2 respuestas 2

2

Al realizar los cálculos debes "limpiar" valores:

  • Eliminar puntos con .replaceAll('.', '')
  • Remplazar coma por punto con .replace(',', '.')

Después de eso, 2.500.000,00 pasará a ser una cadena que Javascript puede interpretar como número: 2500000.00.

Ahora, si el valor de un campo no se puede interpretar como número, por ejemplo, si es una cadena vacía, parseFloat() devolverá NaN y solo necesitas agregar || 0 al final de la línea para asegurar que tienes un valor numérico.

Para más información, lee los comentarios en el código:

let input = document.querySelectorAll(".input");
input.forEach(function(e) {
    // Solo es necesario un evento, no necesitas otros
    e.addEventListener("input", multiplica);
});
function multiplica() {
    let tr = this.closest("tr");

    // inputs[0] es precio, primera posición
    // inputs[1] es cantidad
    let inputs = tr.querySelectorAll(".input");
    
    // Eliminar puntos, remplazar coma por punto y asegurar que es un número
    // Si algo falla, el valor será cero
    let precio = parseFloat(inputs[0].value.replaceAll('.', '').replace(',', '.')) || 0;

     // El input de cantidad es numérico, no es necesario hacer remplazos
    let cantidad = parseFloat(inputs[1].value) || 0;
    
    // Calcuar total de esta fila
    tr.querySelector('.total').value = (precio * cantidad).toFixed(2);
    
    calcularTotal(this.closest("table"));
}
function calcularTotal(e) {
    let total = 0;
    let totales = e.querySelectorAll(".total");
    totales.forEach(function(input) {
        // Asegurar que es un valor numérico o cero
        total += parseFloat(input.value) || 0;
    });
    e.querySelector('.totales').value = total.toFixed(2);
}
<!DOCTYPE html>
<html>
<body>
    <table>
        <thead>
            <tr>
                <th>Precio</th>
                <th>Cantidad</th>
                <th>Precio Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>    <input type="text" class="input" value="2.500.000,00">  </td>
                <td>    <input type="number" class="input">                     </td>
                <td>    <input type="text" class="total" readonly>             </td>
            </tr>
            <tr>
                <td>    <input type="text" class="input" value="4.500.000,00" >  </td>
                <td>    <input type="number" class="input">                      </td>
                <td>    <input type="text" class="total" readonly>              </td>
            </tr>
            <tr>
                <td>TOTAL</td>
                <td>    <input type="text" class="totales" value="0" readonly>   </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
 

Al final si quiere mantener la retro-compatibilidad con el sistema numérico que ha implementado debe de ejecutar:

new Intl.NumberFormat().format(total)

Con esto el string de salida será 2.500.000,00

Recomendación: Declara tus variables con let en vez de var para limitar el contexto y evitar colisiones o reescribir variables globales.

7
  • 1
    Tal y como se le ha dicho al OP, esta es la forma de trabajar los valores. Ahora, si quiere que visualmente se VEAN, con separadores de miles y decimales, DEBE aplicarle un formato a los inputs, para que obtenga el 100% de lo quiere.
    – Excorpion
    el 9 jun. 2021 a las 15:32
  • 1
    @Excorpion ya edite la respuesta... el OP quiere mantener la compatibilidad con el sistema numérico.
    – user46896
    el 9 jun. 2021 a las 15:35
  • Muchas Gracias @Triby y también a Francisco Núñez eso era lo que quería mantener el formato de miles y decimales y luego quitárselo para poder trabajarlo como entero y así poder multiplicarlo sin que me de error de NaN, Gracias a Excorpion por comentar el 9 jun. 2021 a las 16:02
  • Aún nadie agrega el formato a los inputs, pero bue... al menos el OP acepto una respuesta.
    – Excorpion
    el 9 jun. 2021 a las 16:27
  • 1
    @Excorpion, en el primer comentario de esta respuesta OP menciona que sabe cómo dar formato y, de cualquier forma, la edición de Francisco en mi respuesta sugiere cómo lograrlo.
    – Triby
    el 9 jun. 2021 a las 16:47
1

Cuando calcules el total que tengas por ejemplo:

var total = 25000000

Entonces puedes usar un método de Javascript que es bien directo con le formato de miles:

new Intl.NumberFormat().format(total) //Esto te lo transformará en 25.000.000
3
  • La parte de dar formato la conozco bien, pero supongamos que este total tiene separador de miles y decimales como lo multiplicas? el 9 jun. 2021 a las 15:29
  • @TheRiddler, tal y como ha puesto triby, verás que las multiplicaciones funcionan correctamente, solo que falta añadirle el formato que tu quieres, el cual usa . como separador de miles y , para decimal.
    – Excorpion
    el 9 jun. 2021 a las 15:35
  • Lo que intentamos decirte Excorpion y yo es que ningún lenguaje te va dar como resultado un número ya formateado en miles y decimales, esto es, porque el formatos con puntos y comas depende de la región, y también por lo tipado de los lenguajes: el tipo de variable. Todo número por muy grande que sea, el lenguaje de programación lo devuelve sin formato. Como te dice @Excorpion tu puedes mostrarlo luego de haber tratado ese número con, por ejemplo, el método que te he puesto en la respuesta. Ya pasado por el método lo colocas donde quieras que se vea así. el 9 jun. 2021 a las 15:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.