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

Posted 2023-02-22

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

【英文标题】：How to multiple (a*b) two input text value and show it Dynamicly with text change in javascript?

【发布时间】：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 不是免费的代码编写服务。

【参考方案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。

注意：未经测试。