Question

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

当我更改变量＃1时，结果立即更改。但是，当我更改变量2时，结果保持不变。

如何重新配置我的代码，以便在更改任何一个变量时结果都能立即更改？

HTML：

// For saving the file:
Storage::put('file.jpg', $contents, 'private');

// For retrieving:
if ($user->has_permission) {

   $url = Storage::disk('s3')->temporaryUrl(
      'file1.jpg', Carbon::now()->addMinutes(5)
   );
}

Answer 1

您这里出了很多问题，您需要同时在var1文本框和var2文本框中绑定keyup事件另外，您的乘法公式也是错误的。这是需求代码：

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

Answer 2

考虑使用以下jQuery语法#var1在#var2和#var1, #var2输入上绑定键盘更新事件，以实现此所需的行为，如下所示：

$(document).ready(function(){

    // Select and bind keyup event to both "var" input elements using 
    // this syntax
    $('#var1, #var2') 
    .keyup(function(){ 

        // Adjust your keyup handler to perform calculation when keyup 
        // occurs on either input field
        var total= 0;
        if(!isNaN(parseInt($("#var1").val())* parseInt($("#var2").val()))){
             total = parseFloat($("#var1").val())* parseFloat($("#var2").val());
        }

        $("#result").val(total);
    });
});

Answer 3

我只想用原始Javascript回答问题的将来参考。我先做var1，var2 class =“ input”，然后将它们都查询选择，然后将它们循环，这样当您向它们输入任何数字时，它们的值（乘积）将在id =“ result”中产生如果您没有给它们加上任何数字，则它们的默认值均为零（0），因此，假设您仅将10放入var1中，那么输出将仅为10，并且如果您输入非数字字符，那么输出为NaN。

            wellSection.map(function(section,i){
                return (<rect
                    name={"casing_section[" + (section.section) + "]"}
                    fill=""
                    width="2"
                    height={casingHeight(section.DepthTvdFrom, section.DepthTvdTo)}
                    transform={"translate(" + casingPositionX(i) + "," + casingPositionY(i) + ")"}
                />)

            })

    let input = document.querySelectorAll(".input");
    let var1 = document.querySelector("#var1");
    let var2 = document.querySelector("#var2");
    let output = document.querySelector("#result");


    function result(var1=0,var2=0) {
        output.value = Number(var1)*Number(var2);
    }

    for(let i=0;i<input.length;i++)
    {
        input[i].addEventListener(`keyup`,()=>result(var1.value,var2.value))
    }

通过代替输入id var1，var2值，还可以使代码更短，而只需输入输入类[0]和[1]相同即可。

所以也可以用这种方式完成。

<h6>Variable #1</h6>
    <input id="var1" class="input">

    <h6>Variable #2</h6>
    <input id="var2" class="input">

    <h6>Result</h6>
    <input readonly="readonly" id="result">

    let input = document.querySelectorAll(".input");
    let output = document.querySelector("#result");


    function result(var1=0,var2=0) {
        output.value = Number(var1)*Number(var2);
    }

    for(let i=0;i<input.length;i++)
    {
        input[i].addEventListener(`keyup`,()=>result(input[0].value,input[1].value))
    }

如果要使用三元运算符遵循相同的逻辑，

通过使用三元运算符，让我们遵循他的示例

将结果函数更改为此。

<h6>Variable #1</h6>
<input id="var1" class="input">

<h6>Variable #2</h6>
<input id="var2" class="input">

<h6>Result</h6>
<input readonly="readonly" id="result">

可变乘数

3 个答案: