如何将（a*b）两个输入的文本值乘以一个，并在javascript中通过文本更改动态显示它？

Question

我想显示客户必须支付的钱，我的输入是这样的：

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

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

当输入文本发生变化时，我想在一个中显示总成本（数量*成本）




Answer 1

希望这会有用

// 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
}

JSFIDLE

Answer 2

如果两个框都为空，上述所有操作都将生成错误。试试这段代码，它已经过测试并正在运行。

<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>

Answer 3

你可以试试这个：

<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>

和javascript部分：

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

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

}

您必须确保在输入中输入了数字。