我正在努力学习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的初学者，所以您在这里看到的大部分内容可能会非常令人生畏和困惑。尽管如此，随着您的知识增加，您希望能从这里展示的一些技术中找到价值 - 但如果您有问题，可以随时提问！

回复