0

Lo que quiero hacer es que en 1 input agregue el total, otro input ponga cuánto pago de anticipo y me dé resultado en otro input lo que se resta, pero con los signos de pesos y separador de miles $100.00

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
    </head>
    <body>
    El producto cuesta: <input type="text" id="caja1" placeholder="Precio 1">
    <br><br>
    Estas pagando con: <input type="text" id="caja2" placeholder="Precio 2">
    <br><br>
    Tu cambio es : <input type="text" id="caja3" placeholder="Precio 3">
    <div id="aviso"></div>
    <script>
        let precio1 = document.getElementById("caja1")
        let precio2 = document.getElementById("caja2")
        let precio3 = document.getElementById("caja3")
        
        precio2.addEventListener("change", () => {
            precio3.value = parseFloat(precio2.value) - parseFloat(precio1.value)

        })
        
    </script>
    </body>
    </html>

4
  • 1
    Puedes mirar toLocaleString: es.stackoverflow.com/questions/294763/… el 1 jul. 2021 a las 15:55
  • 1
    Otra opción es utlizar Intl.NumberFormat, es bastante sencillo y te ofrece muchas otras opciones de personalización. el 1 jul. 2021 a las 16:06
  • el signo $ me lo toma como un numero o carácter y no me deja restarlo me sale NAN, saben como podría evitar eso? XMASK = n.charAt(x-1) + XMASK, x--; } else if ( y && "$0".indexOf(mask.charAt(y-1))+1 ) { XMASK = mask.charAt(y-1) + XMASK; el 1 jul. 2021 a las 17:11
  • 1
    Intenta colocar las preguntas adicionales, en la misma pregunta, leer código de los comentarios no es lo mas cómodo. el 1 jul. 2021 a las 22:19

1 respuesta 1

1

podes usar este codigo para darle formato a tus numeros:

var options = { style: 'currency', currency: 'MXN' }
var numberFormat = new Intl.NumberFormat('es-MX', options)
console.log(numberFormat.format(654321.987))
console.log(numberFormat.format(12))
console.log(numberFormat.format(1000000.259))

Podes ver este documento para mas información. https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

let precio1 = document.getElementById("caja1")
let precio2 = document.getElementById("caja2")
let precio3 = document.getElementById("caja3")
        
precio2.addEventListener("change", () => {
        
  var numberFormat = new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' });
  precio3.value = numberFormat.format(parseFloat(precio2.value) - parseFloat(precio1.value))

})
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
    </head>
    <body>
      El producto cuesta: <input type="text" id="caja1" placeholder="Precio 1">
      <br><br>
      Estas pagando con: <input type="text" id="caja2" placeholder="Precio 2">
      <br><br>
      Tu cambio es : <input type="text" id="caja3" placeholder="Precio 3">
      <div id="aviso"></div>
    </body>
  </html>

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.