首頁猿問 javascript...

javascript 中的函數僅適用于其中一行

JavaScript

阿波羅的戰車 2023-05-11 14:09:55

我有這個有 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 回答

神不在的星期二

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 -->

<! --PRIMERA LINEA -->

<tr>

<th>Double_Fuel</th>

</tr>

<! --SEGUNDA LINEA -->

<tr>

<td>

</td>

<td>

</td>

</tr>

<! --TERCERA LINEA -->

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

反對回復 2023-05-11

狐的傳說

TA貢獻1804條經驗獲得超3個贊

發生這種情況是因為您復制了IDs，這在單個網頁上必須是唯一的。

因此，我更改了IDstoclasses并使用了該.querySelectorAll()方法，然后通過forEach循環將該方法添加到您可能擁有的.addEventListener()所有可能（以供將來支持）。<input><table>

這是工作代碼：

<html>

<body>

<! --COMIENZO TABLA -->

<! --PRIMERA LINEA -->

<tr>

<th>Double_Fuel</th>

</tr>

<! --SEGUNDA LINEA -->

<tr>

<td>

</td>

<td>

</td>

</tr>

<! --TERCERA LINEA -->

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

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>

反對回復 2023-05-11

慕萊塢森

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;

}

<tr>

<th>Double_Fuel</th>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

反對回復 2023-05-11

3 回答
0 關注
232 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

javascript 中的函數僅適用于其中一行

javascript 中的函數僅適用于其中一行

3 回答

添加回答