时间戳

首页 > 解决方案 > 如何从“FOR”循环中添加我的输出并求和

javascript - 如何从“FOR”循环中添加我的输出并求和

问题描述

我是初学者，所以我想问一下如何从我的输入表单中总结我的“FOR”循环值？GrandTotal 用于在我的表单中将其更改为“只读”文本框。

let grandTotal = 0;
for(let i = 1; i <= 5; ++i) {
  grandTotal += parseInt(document.getElementById("Total" + i).value);
}
grandTotal = document.getElementById("GrandTotal").value;

这是我的 HTML 的一部分\

<tr id="One">
  <td style="font-family:  papyrus;font-weight: bold;">1</td>
  <td width="20%"><input type="text" id="BookTitle" name="BookTitle" size="30" ></td>
  <td width="17%"><input type="text" id="Author" name="Author" size="10"></td>
  <td width="20%"><select id="Category" name="Category">
    <option value="Please choose the categoty...">Please choose the Category...</option>
    <option value="Business">Business</option>
    <option value="Fiction">Fiction</option>
    <option value="Mathematics">Mathematics</option>
    <option value="Technology">Technology</option>
    </select></td>
  <td width="13%"><input type="text" class="UnitPrice" id="UnitPrice1" name="Unit Price" step="0.01" value="0.00" placeholder="0.00" onkeypress="return forNumberOnly(event)"></td>
  <td width="13%"><input type="text" class="Quantity" id="Quantity1" name="Quantity" value="0" min="0" onkeypress="return forNumberOnly(event)"></td>
  <td width="13%"><input type="text" id="Total1" name="Total" value="0.00"  readonly></td>
</tr>

标签： javascripthtmlformsfunctionfor-loop

解决方案

看看这个 - 我使用选择器[name=Total]，因为它比[id^=Total]

我将更改委托给 tbody：

document.getElementById("tb").addEventListener("change", function(e) {
  const tgt = e.target;
  const parent = tgt.closest("tr");
  const up  = +parent.querySelector(".UnitPrice").value || 0
  const qty = +parent.querySelector(".Quantity").value || 0
  parent.querySelector("[name=Total]").value = (up * qty).toFixed(2);
  
  const grandTotal = [...document.querySelectorAll("[name=Total]")] // all total
    .map(ele => +ele.value) // get each value and convert to number
    .reduce((a, b) => a + b); // sum them
  document.getElementById("GrandTotal").value = grandTotal; // assign to a field
})
<table>
  <tbody id="tb">
    <tr id="One">
      <td style="font-family:  papyrus;font-weight: bold;">1</td>
      <td width="20%"><input type="text" id="BookTitle" name="BookTitle" size="30"></td>
      <td width="17%"><input type="text" id="Author" name="Author" size="10"></td>
      <td width="20%">
        <select id="Category" name="Category">
          <option value="Please choose the categoty...">Please choose the Category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>
      <td width="13%"><input type="text" class="UnitPrice" id="UnitPrice1" name="Unit Price" step="0.01" value="0.00" placeholder="0.00"></td>
      <td width="13%"><input type="text" class="Quantity" id="Quantity1" name="Quantity" value="0" min="0"></td>
      <td width="13%"><input type="text" id="Total1" name="Total" value="0.00" readonly></td>
    </tr>
    <tr id="Two">
      <td style="font-family:  papyrus;font-weight: bold;">1</td>
      <td width="20%"><input type="text" id="BookTitle" name="BookTitle" size="30"></td>
      <td width="17%"><input type="text" id="Author" name="Author" size="10"></td>
      <td width="20%">
        <select id="Category" name="Category">
          <option value="Please choose the categoty...">Please choose the Category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>
      <td width="13%"><input type="text" class="UnitPrice" id="UnitPrice2" name="Unit Price" step="0.01" value="0.00" placeholder="0.00" onkeypress="return forNumberOnly(event)"></td>
      <td width="13%"><input type="text" class="Quantity" id="Quantity2" name="Quantity" value="0" min="0" onkeypress="return forNumberOnly(event)"></td>
      <td width="13%"><input type="text" id="Total2" name="Total" value="0.00" readonly></td>
    </tr>
  </tbody>
</table>

<input type="text" readonly id="GrandTotal" />

推荐阅读