0

Les explico el contexto, es un sistema donde agrego un X producto a una lista de pedido.

Al seleccionar un X producto, este me detalla los siguientes inputs para completar: Cantidad - Precio Unitario - Precio Total.

Tengo funcionando lo siguiente: Si yo agrego cantidad: ej: 10 ; y en precio unitario: $5 ; en el campo "precio total" realiza la multiplicación y muestra el total: "$50". Hasta aquí todo genial

Ahora bien, necesito hacer lo mismo pero que en caso de colocar solo el precio total, y que automáticamente muestre el precio unitario, realizando la división correspondiente.

Osea que la función matemática funcione para ambos lados. Pero no logro hacerlo.

Este es el JS

<script type="text/javascript">
  interval = setInterval("calcular()",1);  
  function calcular(){  
  cant = document.addproducto.unidades.value;  
  pre = document.addproducto.unitario.value; 
  document.addproducto.precio.value = (cant * 1) * (pre * 1) ;  
  }  
  function NoMulti(){  
  clearInterval(interval);  
  }
</script>

el HTML

Cantidad
<input form="addproducto" class="input_modal" name="unidades" type="number" id="unidades" required="required" min="1" />

Precio unitario
<input form="addproducto" class="input_signo" name="unitario" type="number" id="unitario" min="0" value="0"  required="required"/>

Precio total
<input form="addproducto" class="input_signo" name="precio" type="number" id="precio" min="0"  required="required"/>

1 respuesta 1

0

La cuestión no es simple, por ejemplo si actualizas el número de unidades ¿qué debe calcularse el precio unitario o el total?.
Al modificar un valor debes tener en cuenta cual está vacío o no actualizado...
Además lo suyo es usar eventos no un temporizador. Un evento que llama a una función cuando ocurre algo, en este caso cuando se cambio el valor de un campo.
Te doy una solución a ver que tal.
En esta solución si se cambia el campo de unidades y los otros ya están rellenos, se calcula el precio total, puedes cambiarlo para que calcule el unitario

<script>

//Comprueba si todo está actualizado
function actualizado(form){
    if (form.precio.value === "" || form.unitario.value ==="" || form.unidades.value ===""  )
      return false
    if (form.precio.value === form.unitario.value*form.unidades.value)
      return true
    else 
      return false      
}

function calcular()
{
var form = event.target.form
var campo = event.target.id;
if (actualizado(form))
      return
var vacios =['','',''];
if(form.unidades=="") vacios[0] = 'unidades' 
if(form.unitario=="") vacios[1] = 'unitario'
if(form.precio=="") vacios[2] = 'precio'
var blancos = vacios.reduce((a,b)=>{
      if(b !='') return a+b;
      else  return a;
      }, 0);
//si hay dos vacios no hacer nada      
if (blancos >=2)
    return
//Si todos están llenos pero no está actualizado calcula el que no ha cambiado 
//si el evento es causado por precio calcula unitario y viceversa
//Si se cambia unidades calcula el precio total
if (blancos == 0){
    if(campo === "precio")
        form.unitario.value = form.precio.value / form.unidades.value
    else
        form.precio.value = form.unidades.value * form.unitario.value
    }
else{ 
    //rellenar campo que falta por rellenar
    var campo = vacios.find((a)=>a!=''); 
    if(campo === "precio")
        form.precio.value = form.unidades.value * form.unitario.value
    else
        form.unitario.value = form.precio.value / form.unitario.value
    }
}
</script>

El código HTML también te lo he modificado incluyendo el form

<form id="addproducto" action="">
<p>
Cantidad
<input  onchange="calcular()" class="input_modal" name="unidades" type="number" id="unidades" required="required" min="1" />
</p>
<p>
Precio unitario
<input  onchange="calcular()" class="input_signo" name="unitario" type="number" id="unitario" min="0" value="0"  required="required"/>
</p>
<p>
Precio total
<input  onchange="calcular()" class="input_signo" name="precio" type="number" id="precio" min="0"  required="required"/>
</p>
</form>
1
  • Hola me funcionó perfectamente y resolvió el problema que tenía
    – Max Calis
    el 17 sep. 2021 a las 3:05

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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