0

Necesito que en la columna Costo al momento de tipear el valor numerico me separe en decimales ejemplo: 1.345.654

En este caso ya me han ayudado a resolver lo siguiente Que al ingresar en la celda CANTIDAD algun valor numerico me multiplique por el COSTO automaticamente y el resultado se visualice en el input de total de sus fila, y luego de manera automatica sin ningun boton que me sume los totales al final Tambien al momento de tipear los datos numericos en los input correspondientes a COSTO y CANTIDAD me separe con puntos decimales ejemplo= 2.345.543 y cuando multiplique CANTIDAD por COSTO se visualice en el input TOTAL tambien con puntos decimales

Todo esto ya esta hecho solo me faltaria que en la columna COSTO me separe con decimales al tipear los datos numericos

function changeValores(id){
  let CantElement = document.getElementById("cant" + id);
  let ValorElement = document.getElementById("valor" + id);
  let TotalElement = document.getElementById("total" + id);
  
  let totalParcial = Number(CantElement.value) * Number(ValorElement.value);
  
  TotalElement.setAttribute("data-total",totalParcial);
  TotalElement.value = totalParcial.toLocaleString('es');
  actualizarTotales();
}

function actualizarTotales(){
   let TotalElement = document.getElementById("total");
   let suma=0;
   document.querySelectorAll("input[data-total]").forEach( e => suma += Number(e.getAttribute("data-total")));
   TotalElement.value = suma.toLocaleString('es');
}
<form>
<table>
<thead>
<tr>
<td>Producto</td>
<td>Cantidad</td>
<td>Costo</td>
<td>Total</td>
<tr>
</thead>

<tbody>
<tr>
<td>Puertas</td>
<td><input type="number" id="cant1" oninput="changeValores(1)" ></td>
<td><input type="number" id="valor1" value=""  oninput="changeValores(1)"></td>
<td><input type="text" id="total1"  data-total="" readonly></td>
<tr>

<tr>
<td>Puertas</td>
<td><input type="number" id="cant2" oninput="changeValores(2)" ></td>
<td><input type="number" id="valor2" value=""  oninput="changeValores(2)"></td>
<td><input type="text" id="total2" data-total="" readonly></td>
<tr>

</tbody>

<tfoot>
<tr>
<td></td>
<td></td>
<td>Total</td>
<td><input type="text" id="total" readonly></td>
<tr>
</tfoot>
</table>


</form>

2 respuestas 2

0

Podes hacer uso de Intl.NumberFormat.

Documentacion: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE').format(number));
//  output: "123.456,789"

1
  • Muchas gracias Agustin pero como hago funcionar con este metodo dentro de mi codigo?? Commented el 4 oct. 2022 a las 11:59
0

Recuerda que para separar en cienes, miles y millones es con , y para los decimales es con .. Podrías utilizar expresiones regulares para separar cada 3 números con ,:

const numero = 43859382;
const numero2 = 59485.45;

const format = (number) => {
  const exp = /(\d)(?=(\d{3})+(?!\d))/g;
  const rep = '$1,'; // Si quieres con puntos decimales, cambialo por '$1.'
  return number.toString().replace(exp,rep);
}

console.log(format(numero));  // 43,859,382
console.log(format(numero2)); // 59,485.45

Integrandolo en tu código, sería así:

  function changeValores(id){
    let CantElement = document.getElementById("cant" + id);
    let ValorElement = document.getElementById("valor" + id);
    let TotalElement = document.getElementById("total" + id);

    let totalParcial = Number(CantElement.value) * Number(ValorElement.value);

    TotalElement.setAttribute("data-total",totalParcial);
    TotalElement.value = formatNumber(totalParcial);
    actualizarTotales();
  }

  function actualizarTotales(){
    let TotalElement = document.getElementById("total");
    let suma = 0;

    document.querySelectorAll("input[data-total]").forEach( e => suma += Number(e.getAttribute("data-total")));
    TotalElement.value = formatNumber(suma);
  }
  
  function formatNumber(number){
    const exp = /(\d)(?=(\d{3})+(?!\d))/g;
    const rep = '$1,';
    return number.toString().replace(exp,rep);
  }
<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/style.css" />
  </head>

  <body>
<form>
  <table>
    <thead>
      <tr>
        <td>Producto</td>
        <td>Cantidad</td>
        <td>Costo</td>
        <td>Total</td>
      </tr>
      <tr></tr>
    </thead>
    <tbody>
      <tr>
        <td>Puertas</td>
        <td>
          <input type="number" id="cant1" oninput="changeValores(1)" />
        </td>
        <td>
          <input type="number" id="valor1" value="" oninput="changeValores(1)"
          />
        </td>
        <td><input type="text" id="total1" data-total="" readonly /></td>
      </tr>
      <tr></tr>
      <tr>
        <td>Puertas</td>
        <td>
          <input type="number" id="cant2" oninput="changeValores(2)" />
        </td>
        <td>
          <input type="number" id="valor2" value="" oninput="changeValores(2)"
          />
        </td>
        <td><input type="text" id="total2" data-total="" readonly /></td>
      </tr>

      <tr></tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td>Total</td>
        <td><input type="text" id="total" readonly /></td>
      </tr>
      <tr></tr>
    </tfoot>
  </table>
</form>
  </body>
</html>

5
  • Gracias por tu ayuda Cris pero como lo hago funcionar dentro de mi codigo esa es la gran pregunta Commented el 4 oct. 2022 a las 18:32
  • @MarceloJoseSosaSosa acabo de editar mi respuesta. Commented el 4 oct. 2022 a las 19:42
  • Cris los puntos decimales necesito que se aplique en la columna costo Commented el 4 oct. 2022 a las 19:46
  • se visualice en el input TOTAL tambien con puntos decimales -> a esto no te referías? Commented el 4 oct. 2022 a las 19:49
  • Hola Cris en el input TOTAL se visualiza con puntos decimales eso ya esta listo osea ya funciona ahora lo que necesito es que en el input COSTO en el momento de ingresar un valor numerico tambin me separe por decimales Commented el 5 oct. 2022 a las 11:39

Tu Respuesta

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

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