javascript - 可变乘数

Question

我创建了一个简单的计算器，它接受变量 #1 和变量 #2 并将它们相乘以生成结果。

当我更改变量 #1 时，结果会立即发生变化。但是，当我更改变量 #2 时，结果保持不变。

如何重新配置​​我的代码，以便在任一变量发生变化时结果立即发生变化？

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h6>Variable #1</h6>
<input id="var1">

<h6>Variable #2</h6>
<input id="var2">

<h6>Result</h6>
<input readonly="readonly" id="result">

<script>
$(document).ready(function(){
    var mt=$("#var1");
    mt.keyup(function(){
        var total=isNaN(parseInt(mt.val()* $("#var2").val())) ? 0 :(mt.val()* $("#result").val())
        $("#result").val(total);
    });
});

</script>

Answer 1

你这里有很多问题，你需要绑定(bind) keyup var1 文本框和 var2 文本框中的事件另外，你的乘法公式也是错误的。这是愿望代码:

$(document).ready(function(){
    var mt=$("#var1,#var2");
    mt.keyup(function(){
    debugger;
        var total= 0;
        if(!isNaN(parseInt($("#var1").val())* parseInt(parseInt($("#var2").val())))){
          total=  parseInt($("#var1").val())* parseInt(parseInt($("#var2").val()));
        }
        
        $("#result").val(total);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h6>Variable #1</h6>
<input id="var1">

<h6>Variable #2</h6>
<input id="var2">

<h6>Result</h6>
<input readonly="readonly" id="result">