![](/img/trans.png)
[英]How can i change the both value change and function call in a single onChange
[英]How can I use a single function for both Rows to calculate value?
當我在第4個輸入上輸入一些數字時。 它會自動計算最后兩個輸入中的值。 對於這些單獨的行,我使用了兩個單獨的函數。 如何使用適用於兩者的單個功能?
function myFunction() { var b = document.getElementById('b').value; var d = document.getElementById('d').value; var e = document.getElementById("e").value; var f = document.getElementById('f').value = (d*e).toFixed(3); var g = document.getElementById('g').value = (f*b).toFixed(3); } function myFunction1() { var b = document.getElementById('b1').value; var d = document.getElementById('d1').value; var e = document.getElementById("e1").value; var f = document.getElementById('f1').value = (d*e).toFixed(3); var g = document.getElementById('g1').value = (f*b).toFixed(3); }
<table border="1" style="border-collapse:collapse;"> <tr> <td>Produto</td> <td style="display: none;"></td> <td>Diluição</td> <td>Necessario de produto para limpar 1m2</td> <td>Metragem do ambiente a ser limpo</td> <td>Resultado em litros de produto concentrado para limpar a metragem do cliente</td> <td colspan="2">Quantidade de solução em litros</td> </tr> <tr> <td colspan="7" style="text-align: center;">CONCENTRADOS- LINHA CONC</td> </tr> <tr> <td rowspan="3">Concentrax Desinfetante</td> <td><input id="b" type="text" name="" value="15" disabled></td> <td><input id="c" type="text" name="" value="1/15" disabled> </td> <td><input id="d" type="text" name="" value="0.011" disabled> </td> <td><input id="e" type="text" name="" value="0" oninput="myFunction()"></td> <td><input id="f" type="text" name="" value="0.00"></td> <td><input id="g" type="text" name="" value="0.00"> </td> </tr> <tr> <td><input id="b1" type="text" name="" value="200" disabled></td> <td><input id="c1" type="text" name="" value="1/200" disabled> </td> <td><input id="d1" type="text" name="" value="0.00083" disabled> </td> <td ><input id="e1" type="text" name="" value="0" oninput="myFunction1()"></td> <td><input id="f1" type="text" name="" value="0.00"></td> <td><input id="g1" type="text" name="" value="0.00"> </td> </tr> </table>
或者,如果您想要一種可擴展的方法:
function myFunction(suffix) {
var b = document.getElementById('b' + suffix).value;
var d = document.getElementById('d' + suffix).value;
var e = document.getElementById("e" + suffix).value;
var f = document.getElementById('f' + suffix).value = (d*e).toFixed(3);
var g = document.getElementById('g' + suffix).value = (f*b).toFixed(3);
}
然后第一行使用myFunction('')進行調用,第二行使用myFunction('1')進行調用。
function myFunction(id) {
if(id == "firstRow"){
var b = document.getElementById('b').value;
var d = document.getElementById('d').value;
var e = document.getElementById("e").value;
var f = document.getElementById('f').value = (d*e).toFixed(3);
var g = document.getElementById('g').value = (f*b).toFixed(3);
}else if(id == "secondRow"){
var b = document.getElementById('b1').value;
var d = document.getElementById('d1').value;
var e = document.getElementById("e1").value;
var f = document.getElementById('f1').value = (d*e).toFixed(3);
var g = document.getElementById('g1').value = (f*b).toFixed(3);
}
}
HTML
<tr>
<td rowspan="3">Concentrax Desinfetante</td>
<td><input id="b" type="text" name="" value="15" disabled></td>
<td><input id="c" type="text" name="" value="1/15" disabled> </td>
<td><input id="d" type="text" name="" value="0.011" disabled> </td>
<td><input id="e" type="text" name="" value="0" oninput="myFunction('firstRow')"></td>
<td><input id="f" type="text" name="" value="0.00"></td>
<td><input id="g" type="text" name="" value="0.00"> </td>
</tr>
<tr>
<td><input id="b1" type="text" name="" value="200" disabled></td>
<td><input id="c1" type="text" name="" value="1/200" disabled> </td>
<td><input id="d1" type="text" name="" value="0.00083" disabled> </td>
<td ><input id="e1" type="text" name="" value="0" oninput="myFunction('secondRow')"></td>
<td><input id="f1" type="text" name="" value="0.00"></td>
<td><input id="g1" type="text" name="" value="0.00"> </td>
工作碼筆
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.