如何在javascript中使用多个（a * b）两个输入文本值并动态显示它？答案

【问题标题】：How to multiple (a*b) two input text value and show it Dynamicly with text change in javascript?如何在javascript中使用多个（a * b）两个输入文本值并动态显示它？
【发布时间】：2016-09-04 00:26:21
【问题描述】：

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

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

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

当输入文本发生变化时，我想在<p> 标记中动态显示总成本（数量*成本）如何使用 javascript？

【问题讨论】：

您尝试过的示例会很有用。这个问题有很多解决方案，有些涉及库，有些不涉及
从输入字段中获取值。将其转换为数字。然后相乘
我不知道怎么写js，我只会用它，你能帮我写吗？ :D @FastSnail
我没有剩下任何标志：请有人将其标志为“请做好我的工作”吗？
我投票结束这个问题，因为 Stack Overflow 不是免费的代码编写服务。

标签： javascript html function methods

【解决方案1】：

你可以试试这个：

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

}

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

【讨论】：

【解决方案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>

【讨论】：

以上都是帮助用户达到目标的代码示例，希望用户可以处理错误，否则我们正在做这项工作。
你假设这两个数字都是“int”，那么小数呢？
您还假设用户会输入数字，那么其他数据类型呢？好吧，把你的话文本框改为文本而不是数字然后..
这很好，但我自定义了 1 个答案，效果很好，但 tnx 非常好hh

【解决方案3】：

希望对你有用

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

【讨论】：

【解决方案4】：

如果您考虑使用 JQuery，我已经制作了这个小提琴。
看看它是否适合你。 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>

【讨论】：

【解决方案5】：

试试这个：

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

另外，将您的 HTML 更改为：

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

输入成本和数量。

请注意第二个输入的更改：id='txt' 已更改为 id='txt2'。这是因为没有 2 个元素可以具有相同的 id。

注意：未经测试。

【讨论】：