我正在尝试开发一个具有动态行功能的小型增值税计算器，但是当我使用 OnKeyup 函数尝试此操作时，它只计算第一个数字。
例如，如果我慢慢输入 10 是计算 1 而不是 10 为什么？
<table id="myTable">
<th>Gross amount</th><th>VAT Type</th>
<tr><td><b>Net Total</b></td><td></td></tr>
<tr><td><b>Std Total</b></td><td></td></tr>
<tr><td><b>Zero VAT</b></td><td></td></tr>
<tr><td><b>Gross Total</b></td><td></td></tr>
</table>
<button type="button" onclick="myFunction()" >Try it</button>
<script type="text/javascript">
var a = 1;
var b = 1;
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<input type=number onkeyup = myCalc() />";
cell2.innerHTML = "<div></div>";
let input = document.querySelector("input");
input.setAttribute("id", "id");
input.id = "gross" + a++;
let div = document.querySelector("div");
div.setAttribute("id", "id");
div.id = "vat" + b++;
}
</script>
<script>
var c = 1;
var d = 1;
function myCalc(){
var g = document.getElementById("gross"+c).value;
var v = 6;
var r = parseInt(g) / parseInt(v);
document.getElementById("vat" + d).innerHTML = r.toFixed(2);
c++;
d++;
}
</script>
function myCalc(){
var g = document.getElementById("gross"+c).value;
var v = 6;
var r = parseInt(g) / parseInt(v);
document.getElementById("vat"+d).innerHTML=r.toFixed(2);
c++;
d++;
}
请注意，在此函数结束时，您将递增c。所以你输入一次，它抓住 idgross1的元素，然后做一些事情，然后将 c 增加到 2。现在，下次键入时，它会尝试获取带有 idgross2的元素，这不是您想要的元素。
尝试这样的事情。
将事件侦听器放在输入上，而不是包含它的表单元格上，可以获得更好的结果。
还要注意同时将字符串与递增的数字连接起来。
<html>
<body>
<table id="myTable">
<th>Gross amount</th><th>VAT Type</th>
<tr><td><b>Net Total</b></td><td></td></tr>
<tr><td><b>Std Total</b></td><td></td></tr>
<tr><td><b>Zero VAT</b></td><td></td></tr>
<tr><td><b>Gross Total</b></td><td></td></tr>
</table>
<button type="button" onclick="myFunction()" >Try it</button>
<script>
var a = 1;
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
let newInput = document.createElement('input');
newInput.type = 'number';
newInput.id = "input_" + (a);
newInput.addEventListener('keyup', (event)=>{
let thisElem = event.currentTarget;
let input_value = thisElem.value;
let VAT = 0.7
let result = input_value * VAT;
let output_id = 'output_' + thisElem.id.split('_')[1]
document.getElementById(output_id).innerHTML = result;
})
cell1.appendChild(newInput);
cell2.innerHTML = "<div></div>";
cell2.id = "output_" + (a);
a++;
}
</script>
</body>
</html>