3 回答

TA貢獻1963條經驗 獲得超6個贊
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>

TA貢獻1804條經驗 獲得超3個贊
發生這種情況是因為您復制了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>

TA貢獻1810條經驗 獲得超4個贊
你可以這樣做:
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>
添加回答
舉報