Sum of results in Javascript

1

This script performs the function that when I give a button, a number is incremented and in the other part it is multiplied by the value given in the variable.

What I want is for the final results of each of them to be shown to me in an input text. How can I do it?

<script type="text/javascript">
  var capnum = 0;
  var precio = capnum * 100;
  var capnum2 = 0;
  var precio2 = capnum2 * 180;

  function add(){
    capnum++;
    precio = capnum * 100;
    document.getElementById('display').innerHTML = capnum;
    document.getElementById('mostrar').innerHTML = precio;
  }
  function add2(){
    capnum2++;
    precio2 = capnum2 * 180;
    document.getElementById('display2').innerHTML = capnum2;
    document.getElementById('mostrar2').innerHTML = precio2;
  }
</script>

<button class="n" onclick="add()">AGREGAR CATEGORIA 1</button>
<p></p>
<span class="n">Cantidad:</span>
<div class="m" id="display"><script type="text/javascript">document.write(capnum);</script></div>
<span class="n">Total:</span>
<div class="m" id="mostrar"><script type="text/javascript">document.write(precio);</script></div>

<button class="n" onclick="add2()">AGREGAR CATEGORIA 2</button>
<p></p>
<span class="n">Cantidad:</span>
<div class="m" id="display2"><script type="text/javascript">document.write(capnum2);</script></div>
<span class="n">Total:</span>
<div class="m" id="mostrar2"><script type="text/javascript">document.write(precio2);</script></div>
    
asked by edgar 23.05.2016 в 15:16
source

1 answer

1

You can do it in a similar way to how you are doing right now, only instead of using innerHTML as you do:

document.getElementById('mostrar').innerHTML = precio;

would use value in this way:

document.getElementById('mostrar').value = precio;

This is an example of how the code might look:

<script type="text/javascript">
  var capnum = 0;
  var precio = capnum * 100;
  var capnum2 = 0;
  var precio2 = capnum2 * 180;

  function add(){
    capnum++;
    precio = capnum * 100;
    document.getElementById('display').innerHTML = capnum;
    document.getElementById('mostrar').innerHTML = precio;
    document.getElementById('sumatorio').value = precio + precio2;
  }
  function add2(){
    capnum2++;
    precio2 = capnum2 * 180;
    document.getElementById('display2').innerHTML = capnum2;
    document.getElementById('mostrar2').innerHTML = precio2;
    document.getElementById('sumatorio').value = precio + precio2;
  }
</script>

<button class="n" onclick="add()">AGREGAR CATEGORIA 1</button>
<p></p>
<span class="n">Cantidad:</span>
<div class="m" id="display"><script type="text/javascript">document.write(capnum);</script></div>
<span class="n">Total:</span>
<div class="m" id="mostrar"><script type="text/javascript">document.write(precio);</script></div>

<button class="n" onclick="add2()">AGREGAR CATEGORIA 2</button>
<p></p>
<span class="n">Cantidad:</span>
<div class="m" id="display2"><script type="text/javascript">document.write(capnum2);</script></div>
<span class="n">Total:</span>
<div class="m" id="mostrar2"><script type="text/javascript">document.write(precio2);</script></div>

<p>
  TOTAL SUMATORIO: <input type="text" id="sumatorio" value="0" />
  </p>
    
answered by 23.05.2016 в 15:28