Java脚本函数的不同文本框我的代码在这里

java script functions for different textbox my code here

本文关键字：我的 代码 在这里 文本 脚本 函数 Java      更新时间：2023-09-26

这是我在html和java脚本代码。我编写了三次相同的代码，我想做一次……怎么办...............

<input type="text" name="option1" id="option1" onblur="calc_amt(1);">
<input type="text" name="price1" id="price1"  onblur="calc_amt(1);">
<input type="text" name="amount1" id="amount1" readonly>
<input type="text" name="option2" id="option2" onblur="calc_amt(2);">
<input type="text" name="price2" id="price2"  onblur="calc_amt(2);">
<input type="text" name="amount2" id="amount2" readonly>
<input type="text" name="option3" id="option3" onblur="calc_amt(3);">
<input type="text" name="price3" id="price3"  onblur="calc_amt(3);">
<input type="text" name="amount3" id="amount3" readonly>

<script>
function calc_amt(val){                             
                if(val==1){                                     
                    var option1 = document.getElementById("option1").value;
                    var pri1 = document.getElementById("price1").value;
                    ....
                    document.getElementById("amount1").value=amoun1 ;
                }
                if(val==2){                                     
                    var option2 = document.getElementById("option2").value;
                    var pri2 = document.getElementById("price2").value;
                    ...
                    document.getElementById("amount2").value=amoun2;
                }
                if(val==3){                                     
                    var option3 = document.getElementById("option3").value;
                    var pri3 = document.getElementById("price3").value;
                    ....
                    document.getElementById("amount3").value=amoun3;
                }
                var amoun1=document.getElementById("amount1").value;
                var amoun2=document.getElementById("amount2").value;
                var amoun3=document.getElementById("amount3").value;
                var tot = Number(amt1)+Number(amt2)+Number(amt3);
                document.getElementById("amount").value=tot;
            }
</script>

如何通过只编码一次来解决它…我是初学者，请帮助我....还有其他解决这个问题的办法吗?我需要一个类似继承的解决方案。

您可以像这样进一步减少上面的脚本。你的amoun是不清楚的。但是，您可以像这样减少代码。这只是一个想法，确保变量与正确的语句相匹配。

<script>
function calc_amt(val){                             
                var option1 = document.getElementById("option"+val).value;
                var pri1 = document.getElementById("price"+val).value;
                ....
                document.getElementById("amount"+val).value=""+amount+val ;
                var amoun1=document.getElementById("amount1").value;
                var amoun2=document.getElementById("amount2").value;
                var amoun3=document.getElementById("amount3").value;
                var tot = Number(amt1)+Number(amt2)+Number(amt3);
                document.getElementById("amount").value=tot;
            }
</script>

Replace:

if(val==1){                                     
  var option1 = document.getElementById("option1").value;
  var pri1 = document.getElementById("price1").value;
  document.getElementById("amount1").value=amoun1 ;
}

: 

 var amoun = document.getElementById("amount" + val).value;
 var option = document.getElementById("option" + val).value;
 var pri = document.getElementById("price" + val).value;
 document.getElementById("amount" + val).value=amoun;

TRY…删除所有内联处理程序，并使用模糊处理程序，就像在demo 

$("input[type=text]").on("blur", function () {
    var id = this.id;
    var last = id.charAt(id.length - 1);           // get last id string value
    var optionValue = $("#option" + last).val();
    var priceValue = $("#price" + last).val();
    var option = isNaN(optionValue) ? 0 : +optionValue;   // check is nan 
    var price = isNaN(priceValue) ? 0 : +priceValue;
    $("#amount" + last).val(option * price);  // display multiply value
    $("#amount").text($("input[type=text][id^=amount]").map(function () {  // collect all amount1,2,3  values 
        var value = $(this).val();
        return isNaN(value) ? 0 : +value;
    }).get().reduce(function (a, b) {              // add total value
        return a + b;
    }));
});

演示

优化代码

$("input[type=text]:not([readonly])").on("blur", function () {
    var obj = $();
    obj = obj.add($(this)).add($(this).prevUntil('[readonly]')).add($(this).nextUntil('[readonly]'));
    $(this).nextAll('[readonly]').first().val($.map(obj, function (val, i) {
        return parseInt(val.value, 10) || 0;
    }).reduce(function (a, b) {
        return a * b
    }, 1));
    $("#amount").text($("input[type=text][id^=amount]").map(function () {
        var value = $(this).val();
        return isNaN(value) ? 0 : +value;
    }).get().reduce(function (a, b) {
        return a + b;
    }));

});
演示

相关文章：