我正在努力學習JavaScript，並嘗試計算用戶輸入文字中硫和碳的平均值

Question

請參考下面的HTML表格來理解問題。 我創建了一個表格，為了清晰起見，我給我的文字方塊編號。我試圖計算文字輸入1（%硫）和文字輸入2（%硫）的平均值，並在唯讀文字輸入5（平均硫）中顯示結果。這是針對硫的。 我還試圖計算文字輸入3（%碳）和文字輸入4（%碳）的平均值，並在只讀文字輸入6（平均碳）中顯示結果。這是針對碳的。 此外，我希望JavaScript能夠重複執行這個操作，並對表格中的下一個文字輸入（input7和input8）進行平均，並在唯讀輸入11中顯示結果。 公式也應該對輸入9和10進行相同的操作，將結果顯示在唯讀輸入12中

Answer 1

如果您採用dataset屬性，就可以以這樣的方式關聯輸入和輸出元素，以便可以使用任意數量的輸入進行計算。下面的javascript中的註解應該解釋了發生了什麼

/*
  在计算平均数时使用的实用回调函数。
  
  reducer用于Array.reduce()方法。
  average用于Array.map()方法。
*/
const reducer=(a,c)=>a+c;
const average=(n)=>parseFloat( n.value ) / 2 || 0;


/*
  绑定到文档（或适当的父元素）的委托事件监听器
  监听并处理来自文本输入的keyup事件。在实践中，这个条件可以（应该）更加具体。
*/
const keyuphandler=(e)=>{
  if( e.target instanceof HTMLInputElement && e.target.type=='text' ){
    /*
      使用EVENT来识别感兴趣的HTML元素。
    */
    let table=e.target.closest('table');
    let tr=e.target.closest('tr');
    
    let group=tr.dataset.group;
    let elem=e.target.dataset.elem;
    /*
      使用上述变量，现在可以很容易地识别HTML中的其他元素，
      因为我们知道了dataset属性
      - 请注意，HTML具有多个data-name类型的属性，
      用于根据化学类型和表行相关输入。
      
      inputs是一个节点列表，不是数组，所以必须将其转换为数组，
      以便我们可以使用数组方法“map”和“reduce”
      这是使用“splat”或展开运算符...完成的
      
    */
    let result=table.querySelector(`tr[data-group="${group}"] input[data-elem="${elem}"].result`);
    let inputs=table.querySelectorAll(`tr[data-group="${group}"] input[data-elem="${elem}"].input`);
    /*
      使用数组方法对输入值进行计算，并将结果分配给正确标识的input.result元素。
    */
    result.value = [...inputs]
      .map( average )
      .reduce( reducer, 0 )
  }
};



document.addEventListener('keyup',keyuphandler);

table {
  width: 50px;
  box-sizing:border-box;
  border: 1px solid black;
  border-collapse: collapse;
  font-family:monospace
}
td {
  border: 1px solid black;
  padding: 0px;
  font-size: 10px;
}
th {
  border: 1px solid black;
  padding: 0px;
}
form {
  width: 4px;
}
div {
  display: grid;
}
label {
  display: block;
  width: 4px;
  font-size: 14px;
}
input [type="date"] {
  width: 4px;
}








/*
  以下仅用于美化
  示例 ;-)
*/
table {
  box-sizing:border-box;
  font-family:monospace
}
td,th{padding:0.25rem;}

[data-elem='carbon']{background:rgba(0,0,100,0.1)}
[data-elem='sulphur']{background:rgba(0,100,0,0.1)}
[readonly]{background:rgba(255,0,0,0.1)}

.input{width:3rem}
.result{width:3.5rem}
input{border:1px solid grey;padding:0.2rem;}

<!--
  注意：输入元素的名称在任何计算中都没有起作用，
  因此从以下内容中删除了这些名称。
-->

<table>
  <tr>
    <th>%<br />Sulphur</th>
    <th>%<br />Carbon</th>
    <th>Average<br />Sulphur</th>
    <th>Average<br />Carbon</th>
  </tr>
  
  <tr data-group=1>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td><input type='text' class='result' data-elem='sulphur' readonly /></td>
    <td><input type='text' class='result' data-elem='carbon' readonly /></td>
  </tr>
  <tr data-group=1>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td colspan=2>&nbsp;</td>
  </tr>
  
  <tr data-group=2>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td><input type='text' class='result' data-elem='sulphur' readonly /></td>
    <td><input type='text' class='result' data-elem='carbon' readonly /></td>
  </tr>
  <tr data-group=2>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td colspan=2>&nbsp;</td>
  </tr>
  
  <!-- 
    只需更改任何添加的附加表行对的data-group值，
    就可以轻松扩展此内容。
    例如：
    
  <tr data-group=3>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td><input type='text' class='result' data-elem='sulphur' readonly /></td>
    <td><input type='text' class='result' data-elem='carbon' readonly /></td>
  </tr>
  <tr data-group=3>
    <td><input type='text' class='input' data-elem='sulphur' /></td>
    <td><input type='text' class='input' data-elem='carbon' /></td>
    <td colspan=2>&nbsp;</td>
  </tr>
  -->
</table>

我知道您是JavaScript的初學者，所以您在這裡看到的大部分內容可能會非常令人生畏和困惑。儘管如此，隨著您的知識增加，您希望從這裡展示的一些技術中找到價值 - 但如果您有問題，可以隨時提問！

回覆