时间戳

首页 > 解决方案 > javascript中的函数仅适用于其中一行

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

标签： javascripthtml

解决方案

ids 在页面上应该是唯一的，因此getElementById只返回一个元素（如果没有找到匹配的 id，则返回 null）但是您可以借助数据集属性并使用类而不是 id 来执行计算功能，如下所示：

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>

推荐阅读