Quiero mostrar el dinero que el cliente debe pagar y mis entradas son así:

<input type="text" class="form-control" placeholder="cost " id="txt" name="credit">

<input type="text" class="form-control" placeholder="quantity" id="txt" name="limit">

Cuando el texto de entrada está cambiando, quiero mostrar el costo total (cantidad * costo) en una etiqueta <p> Dinámicamente, ¿cómo puede ser con JavaScript?

-1
hope 9 may. 2016 a las 14:25

5 respuestas

La mejor respuesta

Todo lo anterior generará errores si ambos cuadros están en blanco. Pruebe este código, está probado y ejecutándose.

<script>

function calc()
{
    var credit = document.getElementById("credit").value;

    var limit = document.getElementById("limit").value; 

    if(credit == '' && limit != '')
    {
        document.getElementById("cost").innerHTML = parseInt(limit);
    }
    else if(limit == '' && credit != '')
    {
        document.getElementById("cost").innerHTML = parseInt(credit);
    }
    else if(limit!= '' && credit!= '')
    {
        document.getElementById("cost").innerHTML = parseInt(limit) * parseInt(credit);
    }
    else
    {
        document.getElementById("cost").innerHTML = '';
    }
}
 </script>

</head> 
<input type="number" value="0" min="0"  class="form-control" placeholder="cost" id="credit" name="credit" onkeyup="calc();">

<input type="number" value="0" min="0"  class="form-control" placeholder="quantity" id="limit" name="limit" onkeyup="calc();">


<p id="cost"></p>
1
Megan Fox 9 may. 2016 a las 12:06

En caso de que considere usar JQuery, he hecho este violín.
Ve si funciona para ti. https://fiddle.jshell.net/9cpbdegt/

$(document).ready(function() {

  $('#credit').keyup(function() {
    recalc();
  });

  $('#limit').keyup(function() {
    recalc();
  });

  function recalc() {
    var credit = $("#credit").val();
    var limit = $("#limit").val();
    var result = credit * limit;

    $("#result").text(result);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" value="0">x
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" value="0">

<p id="result">0</p>
1
fborges42 9 may. 2016 a las 11:41

Puedes probar esto:

<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" onchange="calculate()">
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" onchange="calculate()">
<p id="result"></p>

Y parte de javascript:

function calculate() {
   var cost = Number(document.getElementById("credit"));
   var limit = Number(document.getElementById("limit"));

   document.getElementById("result").innerHTML= cost*limit;

}

Debe asegurarse de ingresar números en las entradas.

2
Ricardo Pontual 9 may. 2016 a las 11:34

Prueba esto:

  <script >
 function myFunction() {
document.getElementById('totalcost').innerHTML = document.getElementById('txt').value * document.getElementById('txt2').value;}
</script>

Además, cambie su HTML a esto:

              <input type="text" onkeypress="myFunction()"  onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="cost " id="txt" name="credit">
            <input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="quantity" id="txt2" name="limit">

Ingrese costo y cantidad.

Tenga en cuenta el cambio con la segunda entrada: id = 'txt' se cambió a id = 'txt2'. Esto se debe a que no hay 2 elementos que puedan tener la misma identificación.

Nota: no probado.

1
stevethethread 9 may. 2016 a las 12:03

Espero que esto sea útil

// get cost field
var _cost = document.getElementById("cost");
_cost.addEventListener('keyup',function(event){
updateCost()
})

// get quantity field
var _quantity = document.getElementById("quantity");
_quantity.addEventListener('keyup',function(event){
updateCost()
})


function updateCost(){
var _getCost = document.getElementById("cost").value;
var _getQuantity = document.getElementById("quantity").value;
var _total = _getCost*_getQuantity;
console.log(_total);
document.getElementById("updateValue").textContent = ""; // Erase previous value
document.getElementById("updateValue").textContent = _total // update with new value
}

jsfiddle

1
brk 9 may. 2016 a las 11:39