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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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


查看完整回答
反對 回復 2023-05-11
?
狐的傳說

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>


查看完整回答
反對 回復 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;

}

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


查看完整回答
反對 回復 2023-05-11
  • 3 回答
  • 0 關注
  • 232 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號