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

Question

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

P粉530519234 · Answer

如果您採用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;}




  
    %
Sulphur
    %
Carbon
    Average
Sulphur
    Average
Carbon

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