javascript 中的函数仅适用于其中一行
我有这个有 2 列和 2 行的小表。我在“Fuel”中手动输入一个数字，应该在“Double_Fuel”列上显示双倍数。不幸的是，它只将我的功能应用于第一行。在第二行它不起作用。有人知道为什么吗？提前致谢
<html>
<body>
<style> table, th, td {border: 1px solid black;} </style>
<! --COMIENZO TABLA -->
<table id="MyTable" class="egt">
<! --PRIMERA LINEA -->
<tr>
<th>Fuel</th>
<th>Double_Fuel</th>
</tr>
<! --SEGUNDA LINEA -->
<tr>
<td>
<input type="number" id="fuel">
</td>
<td>
<input type="number" ID="fuel2" >
</td>
</tr>
<! --TERCERA LINEA -->
<tr>
<td>
<input type="number" id="fuel">
</td>
<td>
<input type="number" ID="fuel2" >
</td>
</tr>
</table>
<script>
var fuel = document.getElementById('fuel');
var fuel2 = document.getElementById('fuel2');
function calculate(){
fuel2.value = Number(fuel.value)*2;
}
var inputElement = document.getElementById('fuel');
inputElement.addEventListener('change', calculate);
</script>
</body>
</html>
阿波罗的战车3回答
-
神不在的星期二
ids 在页面上应该是唯一的，因此getElementById只返回一个元素（如果没有找到匹配的 id，则返回 null），但是您可以在数据集属性的帮助下并使用类而不是 ids 来执行计算函数，如下所示：function calculate() { const result = document.querySelector(`#${this.dataset.result}`); result.value = Number(this.value) * 2;}const inputElements = document.querySelectorAll('.fuel');inputElements.forEach(input => input.addEventListener('change', calculate));table,th,td { border: 1px solid black;}<! --COMIENZO TABLA --><table id="MyTable" class="egt"> <! --PRIMERA LINEA --> <tr> <th>Fuel</th> <th>Double_Fuel</th> </tr> <! --SEGUNDA LINEA --> <tr> <td> <input type="number" class="fuel" data-result="fuel1"> </td> <td> <input type="number" id="fuel1"> </td> </tr> <! --TERCERA LINEA --> <tr> <td> <input type="number" class="fuel" data-result="fuel2"> </td> <td> <input type="number" id="fuel2"> </td> </tr></table> -
狐的传说
发生这种情况是因为您复制了IDs，这在单个网页上必须是唯一的。因此，我更改了IDstoclasses并使用了该.querySelectorAll()方法，然后通过forEach循环将该方法添加到您可能拥有的.addEventListener()所有可能（以供将来支持）。<input><table>这是工作代码：<html><body><style> table, th, td {border: 1px solid black;} </style><! --COMIENZO TABLA --><table id="MyTable" class="egt"><! --PRIMERA LINEA --> <tr> <th>Fuel</th> <th>Double_Fuel</th></tr> <! --SEGUNDA LINEA --> <tr> <td> <input type="number" class="fuel"> </td> <td> <input type="number" class="fuel2" > </td> </tr><! --TERCERA LINEA --> <tr> <td> <input type="number" class="fuel"> </td> <td> <input type="number" class="fuel2" > </td> </tr></table><script> var fuels = document.querySelectorAll('.fuel'); fuels.forEach(function(elem) { elem.addEventListener("change", function() { this.parentElement.nextElementSibling.firstElementChild.value = Number(this.value)*2; }); }); </script></body></html> -
慕莱坞森
你可以这样做：var fuel = document.getElementById('fuel');var fuel2 = document.getElementById('fuel2');function calculate(elem) { document.getElementById('double-' + elem.target.id).value = Number(elem.target.value) * 2;}document.getElementById('fuel').addEventListener('change', calculate);document.getElementById('fuel2').addEventListener('change', calculate);table,th,td { border: 1px solid black;}<table id="MyTable" class="egt"> <tr> <th>Fuel</th> <th>Double_Fuel</th> </tr> <tr> <td> <input type="number" id="fuel"> </td> <td> <input type="number" ID="double-fuel"> </td> </tr> <tr> <td> <input type="number" id="fuel2"> </td> <td> <input type="number" ID="double-fuel2"> </td> </tr></table>
随时随地看视频慕课网APP
相关分类
JavaScript