[SOLUCIONADO] Caja que calcual IVA

[emilio_viguri]

Hola que tal bueno pues como me falta de conocimiento en JavaScript es casi nulo no soy muy bueno en hacer algo desde 0 en este lenguaje así que acudo a ustedes para ver si me pueden ayudar con esto

Tengo 2 cajas de texto con valores lo que necesito es que si presiona ya sea

PONER O QUITAR esto haría lo siguiente

Si presiono poner el valor que tenga en una de mis cajas de texto le pone el IVA

Pero si le pongo quitar le quita el IVA para eso son 2 cajas con sus 2 opciones de poner y quitar.

Código HTML:

<form id="form1" name="form1" method="post" action="">
  <p>
    <label for="compra"></label>
    Compra
    <input type="text" name="compra" id="compra" /> 
    <a href="#">Quitar</a> / <a href="#">Poner</a> IVA</p>
  <p>
    <label for="venta">Venta</label>
    <input type="text" name="venta" id="venta" />
  <a href="#">Quitar</a> / <a href="#">Poner</a> IVA</p>
</form>
 

me ayudan ...

[bathorz]

Busca información sobre getElementById(), parseFloat(), parseInt(), focus(),... .Hay mucho para aprender publicado en Internet.

Código HTML:

<script>
   var iva = 18;
 
   function Poner() {
      // por nombre
      var cIva = document.form1.compra.value;
      document.form1.compra.value = (parseFloat(cIva) + parseFloat(cIva * iva / 100));
      document.form1.compra.focus();
 
   }
 
   function Quitar() {
      // por id
      var sIva = document.getElementById("venta").value;
      document.form1.venta.value = (parseFloat(sIva) - parseFloat(sIva * iva / 100));
      document.form1.venta.focus();
   }
</script>
 
<style type="text/css">
   div {
      border: 1px solid #000;
      padding: 10px;
      font: 11px;
      width: 300px;
      height: 60px;
   }
   input {
      font: 11px;
   }
</style>
<form id="form1" name="form1" action="" method="post">
   <div>
      <p>
         <label for="compra">Compra</label>
         <input type="text" name="compra" id="compra" />
         <!--<a href="#">Quitar</a> / <a href="#">Poner</a>-->
         <input type="button" value="Poner" name="poner" onclick="Poner()" >
         IVA
      </p>
      <p>
         <label for="venta">Venta</label>
         <input type="text" name="venta" id="venta" />
         <!--<a href="#">Quitar</a> / <a href="#">Poner</a>-->
         <input type="button" value="Quitar" name="quitar" onclick="Quitar()">
         IVA
      </p>
   </div>
</form>
 

[emilio_viguri]

Bueno si ya lo cheque pero a hora la cosa que no puedo hacer o no se como se pone es como segun mando input text que quiero afecatar por que para facil pongo 2 veces las funciones

compraquita()
comprapone()
ventaquita()
ventapone()

asi con el codigo q me das me funcina pero como le hago para mandar

pone( yas ea en venta o compra)

quita( yas ea en venta o compra)

me explico ...

Código HTML:

<form id="form1" name="form1" action="" method="post">
   <div>
      <p>
         <label for="compra">Compra</label>
         <input type="text" name="compra" id="compra" />
         <!--<a href="#">Quitar</a> / <a href="#">Poner</a>-->
         <input type="button" value="Poner" name="poner" onclick="Poner(compra)" >
         <input type="button" value="Quitar" name="quitar" onclick="Quitar(compra)">
         IVA
      </p>
      <p>
         <label for="venta">Venta</label>
         <input type="text" name="venta" id="venta" />
         <input type="button" value="Poner" name="poner" onclick="Poner(venta)" >
         <input type="button" value="Quitar" name="quitar" onclick="Quitar(venta)">
         <!--<a href="#">Quitar</a> / <a href="#">Poner</a>-->
 
         IVA
      </p>
   </div>
</form>
 

[emilio_viguri]

Solo e podio hacer esto pero no logro hacer que funcione me pueden ayudar

Código Javascript:

<script>
   var iva = 16;
    function Poner(caja) {
      // por nombre
//    var caja = document.getElementById(args[i]);
//      var cIva = document.form1.caja.value;
 
      var caja = Poner.arguments;
      caja = document.getElementById(caja);
      var cIva = document.getElementById(caja).value;
      alert(caja);
      document.form1.caja.value = (parseFloat(cIva) + parseFloat(cIva * iva / 100));
      document.form1.caja.focus();
   }
 
   function Quitar(caja) {
      // por id
      var sIva = document.getElementById(caja).value;
      alert(caja);
      document.form1.caja.value = (parseFloat(sIva) - parseFloat(sIva * iva / 100));
      document.form1.caja.focus();
   }
</script>
 
 
<form id="form1" name="form1" method="post" action="">
         <label for="compra">Compra</label>
         <input type="text" name="compra" id="compra" /><br />
         <input type="button" value="Poner" name="poner" onclick="Poner('compra')" ><br />
         <input type="button" value="Quitar" name="quitar" onclick="Quitar('compra')">
<hr />
         <label for="venta">Venta</label>
         <input type="text" name="venta" id="venta" /><br />
         <input type="button" value="Poner" name="poner" onclick="Poner('venta')" ><br />
         <input type="button" value="Quitar" name="quitar" onclick="Quitar('venta')">
         <!--<a href="#">Quitar</a> / <a href="#">Poner</a>-->
</form>
 

[dAvidcA]

Hola emilio_viguri, del código modifiqué solo el JavaScript que es lo que veo con errores. Simplemente puse que el código sea funcional, más no sé si hace lo que quieras que haga.

Mira el código que tenías y el que te doy a continuación para que aprendas un poco de cómo se debe hacer getElementById(), parseFloat(), y focus(). Lee un poco sobre el tema.

Código Javascript:

var iva = 16;
function Poner(caja) {
  var objCaja = document.getElementById(caja);
  var cIva = objCaja.value;
  objCaja.value = (parseFloat(cIva) + parseFloat(cIva * iva / 100));
  objCaja.focus();
}
 
function Quitar(caja) {
  var objCaja = document.getElementById(caja);
  var sIva = objCaja.value;
  objCaja.value = (parseFloat(sIva) - parseFloat(sIva * iva / 100));
  objCaja.focus();
}
 

Cualquier duda comenta.

Saludos.

[emilio_viguri]

Ok muchas gracias a los que me ayudaron aqui pongo todo el codigo que use ya funcionando

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
 
<body>
<script>
var IVA = 0.16;
function Poner(caja) {
  var objCaja = document.getElementById(caja); //Obtengo el nombre de la caja
  var caja = objCaja.value; //Obtengo el valor de la caja
  objCaja.value = (parseFloat(caja) + (parseFloat(caja * IVA))); 
  objCaja.focus();
}
 
function Quitar(caja) {
  var objCaja = document.getElementById(caja);
  var caja = objCaja.value;
  objCaja.value = (parseFloat(caja / (1+IVA)));
  objCaja.focus();
}
</script> 
 
<form id="form1" name="form1" method="post" action="">
         <label for="compra">Compra</label>
         <input type="text" name="compra" id="compra" /><br />
         <input type="button" value="Poner" name="poner" onclick="Poner('compra')" ><br />
         <input type="button" value="Quitar" name="quitar" onclick="Quitar('compra')">
<hr />
         <label for="venta">Venta</label>
         <input type="text" name="venta" id="venta" /><br />
         <input type="button" value="Poner" name="poner" onclick="Poner('venta')" ><br />
         <input type="button" value="Quitar" name="quitar" onclick="Quitar('venta')">
         <!--<a href="#">Quitar</a> / <a href="#">Poner</a>-->
</form>
</body>
</html>